Importar iconos como tipografías en CSS tiene muchas ventajas. En este post te explicamos cómo hacerlo y por qué te lo recomendamos.
¿Por qué importar iconos como tipografías en CSS?
Cuando importamos iconos como imágenes en .jpg, la calidad del icono depende del tamaño de exportación. Esto quiere decir que no podemos agrandar la imagen infinitamente, pues tiene una calidad determinada. Además, el contenido de un .jpg o .png es inmodificable dentro de CSS.
Por ejemplo, para cambiar su propiedad de color tendríamos que modificarla desde un editor de fotos y luego importarla de nuevo a nuestra página web. En cambio, importar iconos como tipografías en CSS nos permite modificar características como el tamaño y color del icono directamente desde nuestra hoja de estilo. A continuación te explicamos cómo.
El proceso
Para importar iconos como tipografías en CSS primero hay que generar dicha tipografía a partir de iconos. Para ello, puedes usar una página web que te permita encontrar los iconos que quieres y descargarlos como .svg. Te recomendamos IcoMoon App, pero puedes usar otras páginas como FreePik o FlatIcon. Ten en cuenta que todas estas páginas tienen tanto iconos gratis como de pago.
En el caso de IcoMoon, puedes explorar sus extensas librerías y crear tu propia mezcla de iconos para conformar tu tipografía. También puedes importar una imagen y convertirla en .svg para tener más variedad o importar tus propios diseños. Una vez elegidos los iconos que quieres, puedes descargar la tipografía directamente desde IcoMoon. Esto te descargará una carpeta .zip que contiene el archivo CSS y la tipografía en distintos formatos (.truetype, .woff, .svg y .embedded-opentype).
El archivo CSS que nos da IcoMoon contiene la ruta hacia las tipografías y los distintos formatos. Además, antes de que hayas hecho un clic, este ha definido el font weight, font style y font display para que se vea de una manera específica en tu página web. También le ha otorgado un nombre de clase a la tipografía y nombres a cada icono. Este nombre de clase lo puedes cambiar directamente en CSS o antes de descargar la tipografía en IcoMoon.
¿Cómo usar iconos como tipografías en CSS?
Para utilizar la tipografía que has descargado debes usar el selector de clase o de ID que tenga el icono que quieres insertar. Para esto, puedes usar la etiqueta span, que sirve para insertar elementos en la línea, e incluir dentro de este el atributo de clase de tu icono. Como puedes insertar varios atributos de clase en un solo elemento, puedes añadir atributos que se refieran al tamaño y al color del icono. Esto afectará a todo elemento que tenga el selector de clase que hemos determinado en las reglas CSS al inicio de la hoja de estilo. Para saber más acerca de cómo funcionan los selectores, te invitamos a leer nuestro post sobre los selectores básicos en CSS.
Al importar iconos como tipografías en CSS, el sistema cree que lo que pinta es una letra, solo que esa letra forma parte de una tipografía que funciona con iconos. Esto hace que podamos editar su contenido con los atributos de clase.
Por ejemplo, podemos poner un selector de clase que diga que todos los elementos con el atributo de clase “color-rojo” sean de color rojo. Si ponemos este atributo de clase en nuestro icono, se verá afectado, al igual que todos los otros elementos, y cambiará de color. Lo mismo pasaría si el selector de clase realmente hace que todos sus elementos sean dos veces más grandes de lo normal. En este caso, el icono será más grande. La ventaja es que, como ya hemos mencionado, este icono se verá nítido sin importar cómo de grande sea, porque es un elemento vectorial, no basado en píxeles, como podría ser una fotografía.
Por último, si quieres seguir conociendo más trucos y herramientas para facilitar tu experiencia en CSS, te invitamos a inscribirte en nuestro Desarrollo Web Full Stack Bootcamp. En él, pondrás en práctica tus conocimientos sobre CSS y adquirirás muchos más conocimientos para crear y diseñar tu propia página web. ¡Matricúlate ahora!
