Las fuentes de iconos se han convertido desde hace un tiempo en uno de los recursos más utilizados para el diseño de interfaces de usuarios (UI) tanto en productos digitales para la web como en aplicaciones móviles general y son parte fundamental del UIKit.
Una fuente de iconos consiste básicamente en un archivo con el mismo formato que los archivos de fuente de letras como Arial, TimesNewRoman, MyriadPro, etc, de formato .ttf, .eot o .woff, y que tiene todas las características y funciones de una fuente de letras estándar, pero en el que en lugar de letras tendremos iconos.
El uso de fuentes de iconos oferce muchas ventajas tanto para el diseñador como para al desarrollador, por ejemplo:
… entre otras.
En este tutorial aprenderás a crear una fuente de iconos con tu propio set de imágenes para aprovechar todas las ventajas de este tipo de recursos pero con la ventaja de tener sólo los iconos específicos que usas en tu proyecto, no otros, mejorando el performance de la UI al final.
.
PLATZODIAC, Nuestro proyecto de ejemplo:
Para seguir este tutorial asumiremos que nuestro cliente nos ha pedido diseñar una UI para una aplicación en android llamada PlatZodiac y nos ha pedido específicamente usar un estilo de símbolos zodiacales en los que cada uno esté dentro de un recuadro con bordes muy redondeados.
Además el cliente nos ha pedido como parte de sus requerimientos que todos los iconos estén en forma de fuente de iconos para que sus desarrolladores puedan usarlo con más facilidad en la app y en el sitio web indiferentemente.
El cliente ha visto muchas fuentes de iconos que pudiera usar pero no satisfacen sus expectativas porque ninguna de ellas incluye el signo zodiacal de ofiuco y él lo quiere en su set de iconos … bueno, excentricidades del cliente, ya sabes.
Y comenzamos.
En principio debemos crear todos los iconos de nuestro set en algún programa de diseño vectorial como Adobe Illustrator, Inkscape o CorelDraw (cuestión de gustos), el único requisito es que al final debemos tener un archivo SVG por cada uno de los iconos, donde las dimensiones del documento sean exactamente las mismas dimensiones de la imagen (sin espacios vacíos alrededor) y que todas las imágenes estén formadas específicamente por figuras sólidas y no por contornos, ni degradaciones, o cosas raras, sólo figuras sólidas planas.
Yo uso Inkscape, para todo! … Soy un openSource-fanboy! 🤓🤘
Hay varios cursos en la Carrera de diseño de Productos digitales y UX donde aprendes a trabajar con vectores.
Teniendo los archivos SVG individuales con cada uno de los iconos que necesitamos, identificados lo mejor posible y organizados como queremos, abrimos el navegador y entramos en http://IcoMoon.io
IcoMoon
Icomoon.io es un sitio web que ofrece fuentes de iconos comerciales y algunas gratuitas, es muy útil y práctico si no necesitamos usar iconos especiales, raros o personalizados.Tiene todas las librearías de iconos más comunes de la web como FontAwesome, IonIcons, MaterialIcons, LinearIcons, Icomoon, FeatherIcons, etc … y lo mejor de todo, tiene una web app que nos permite crear nuestra propia fuente de iconos personalizada!
PASOS para generar la fuente de iconos
1- Ingresar Icomoon.io y allí en la Icomoon App.
2- Lo primero que vemos al entrar en la IcoMoon App es el set de iconos de IcoMoon – Free, pero como lo que queremos es crear nuestro propio set de iconos, únicamente con los signos zodiacales que nos pidió el cliente, procedemos a borrar el set antes de subir nuestras propias imágenes. Usamos el botón de menú que está a la derecha del set, como se muestra en la figura.
3- Luego de borrar todo el set que estaba por defecto seleccionado, estaremos listos para escoger iconos que queremos, bien sea seleccionando iconos de las librearías disponibles en IcoMoon, o bien subiendo (Importando) nuestro propio set de iconos en formato SVG.
Para efectos de este tutorial, no profundizaremos en el uso de las librerías disponibles en IcoMoon sino que pasaremos directo a importar nuestros iconos a la IcoMoon App. Sin embargo, te invito a explorar y experimentar con las librerías disponibles, tienen miles de iconos geniales!
4- Importamos nuestro set de imágenes SVG con los signos del zodiaco que diseñamos para PlatZodiac! …
Hacemos clic en el botón Import Icons y nos abrirá el diálogo del sistema en el que podemos seleccionar e importar todas las imágenes del set de una sola vez.
RECORDATORIO: Es importante asegurarnos que las imágenes estén en formato SVG, de figuras sólidas, sin efectos raros y en archivos individuales del tamaño exacto de cada icono, de lo contrario pueden haber resultados inesperados.
5- Una vez importadas toas las imágenes, debemos seleccionar cada una de ellas teniendo activado el estado Select en las herramientas de IcoMoon App, asegurándonos de que todos los iconos queden con un borde amarillo, que indica que está seleccionado.
(También tienes otras herramientas que sirven para mover los iconos de lugar, para eliminar iconos individualmente o para modificar algunos atributos individuales, pero no entraremos en detalles para no distraernos, luego podrás experimentar un poco más con estas opciones.)
En la parte inferior de la pantalla están tres secciones (cliqueables) que nos llevan a otras áreas de la IcoMoon App. Por el momento la acción que nos interesa es Generate Font (generar fuente).
6- Cuando tengamos seleccionados todos los iconos que formaran nuestro set definitivo, hacemos clic sobre esta opción.
7- Se nos muestran todos los detalles de cada uno de los códigos unicode y clases css que formarán nuestra fuente de iconos. En esta sección podremos ajustar varios detalles del paquete de archivos que generará finalmente IcoMoon App (pero no entraremos mucho en detalle para no complicar las cosas).
Al igual que FontAwesome, IonIcon, etc. el paquete consta básicamente de un style.css, y una carpeta con los archivos de nuestra fuente en formato, .ttf, .otf, woff y .svg (como un sprite), además de otros recursos que no son necesarios realmente para el funcionamiento de nuestra fuente de iconos en producción sino que son sólo parte de la demo que incluye el paquete final.
8- Hacemos clic en el botón de Preferencias de la parte superior para personalizar la forma en que usaremos nuestras clases CSS como fuente de iconos en nuestro código del UI.
Estas preferencias incluyen el nombre del archivo de la fuente, el prefijo de las clases de CSS asociadas a nuestros iconos, y otras que ya te invito a revisar luego por tu cuenta.
9- Ya que tenemos hechos los ajustes de personalización, cerramos el diálogo anterior en la X y procedemos a descargar el zip del paquete con todos los archivos finales de nuestra fuente de iconos personalizada!
10- Localiza y descomprime el archivo .zip del paquete en la ubicación que elegiste para los recursos de tu UI, o donde prefieras, lo importante es que cuando vayas a probar el funcionamiento, tanto el style.css como la carpeta fonts, deben estar ubicados en el mismo sitio para que todo funcione bien.
11- ¡LISTO! Ya puedes hacer uso de tu fuente de iconos, exactamente de la misma manera como lo hace FontAwesome, IonIcons y los demás …
Recuerda que deberás incluir el archivo CSS en la cabecera de tu código
<linkrel="stylesheet"href="css/style.css"/>y hacer luego referencia a las clases de tus iconos con el prefijo que indicaste en las preferencias.
<span class="platzi-aries"></span>Si has seguido los pasos correctamente, los resultados serán nivel HERO! … Buen trabajo!
Si te gustó este tutorial, te pareció útil haz clic en la manito en el título a ver si me animo 😃 a hacer otro! bai …
Julio J.
Hola , es posible usar este tipo de iconos en admilte 3, en la parte del panel lateral, teniendo en cuenta que solo permite ingresar la etiqueta que genera fontawsome.
Hola, pero hay fontawesome de platzi? como que sea oficial de platzi como para poner en el portafolio y lo remita al perfil en platzi. No hay problemas de brand si hago uno para mi? Gracias.
Para crear iconos en react esta función es muy util
type SvgIconProps = React.SVGProps<SVGSVGElement> exportconst createSvgIcon = ( path: | React.SVGProps<SVGPathElement> | React.SVGProps<SVGPathElement>[], ) => { return (props: SvgIconProps) => { return ( <svg width="24"height="24" viewBox="0 0 24 24"fill="none" {...props} > {path} </svg> ) } }simplemente lo llaman con el path del svg, lo envuelven con un Fragment, en caso de ser más de un path
Ejemplo quedaría así:
exportconst ArrowRightIcon = createSvgIcon( <Fragment> <path d="M14.4297 5.93005L20.4997 12.0001L14.4297 18.0701"stroke="#8E95A9"stroke-width="1.5"stroke-miterlimit="10"stroke-linecap="round"stroke-linejoin="round" /> <path d="M3.5 12H20.33"stroke="#8E95A9"stroke-width="1.5"stroke-miterlimit="10"stroke-linecap="round"stroke-linejoin="round" /> </Fragment>, )ya lo he hecho y es muy bueno solo me queda practicar mas
yo quiero crear mis propios iconos pero no tengo PC y no se como hacer los iconos, vine a este artículos porque decía “crear tu propios íconos” para ver pero me dí cuenta que solo enseñaste a publicar los unicos ya echos no a crearlos 🤔🙄😞