Fuentes de iconos, ¿qué son y cómo utilizarlas?

Dentro del mundo del diseño web, nos podemos encontrar un gran número de recursos que podemos utilizar para dar más vistosidad a una web. Entre todos ellos, el uso de iconos suele ser uno de los recursos más utilizados para dar un toque final perfecto al trabajo. En la red nos podemos encontrar gran cantidad de paquetes de iconos de todo tipo y colores, pero desde hace algún tiempo se vienen utilizando fuentes de iconos. A lo largo de este White Paper hablaremos sobre qué son estas fuentes de iconos, sus principales ventajas y cómo podemos hacer uso de ellas.

Descargar White Paper: ‘Fuentes de iconos, ¿qué son y cómo utilizarlas?’

¿Qué son las fuentes de iconos?

Como su nombre bien dice, las fuentes de iconos son fuentes pero con la diferencia de que se trata de una tipografía especial en la que en lugar de representar letras o números, como estamos acostumbrados, se representan imágenes de diversas cosas. Estas imágenes las podemos utilizar de igual forma que utilizamos cualquier letra, pero con la diferencia de que serán imágenes. En este caso, con la diferencia de que en vez de utilizar la etiqueta HTML del tipo IMG para colocar la imagen, lo haremos indicando la clase correspondiente al icono que queremos mostrar.

Como ya hemos comentado, para conseguir que se muestre el icono correspondiente, no será necesario tener que escribir ningún tipo de caracter, únicamente deberemos indicar un elemento con una clase para indicar que dentro se debe colocar un icono.

<span class=”un-icono”></span>

Mediante el código anterior, en la parte pública de la web, aparecería la imagen a la que hace referencia la clase “un-icono“.

Seguro que en alguna ocasión, navegando por cualquier página web, os habéis encontrado con este tipo de elementos, aunque no supierais que se trata de una fuente de iconos.

Ventajas de utilizar fuentes de iconos

Las fuentes de iconos, que también son conocidas como “icon fonts“, ofrecen una serie de interesantes ventajas a los diseñadores de páginas web. Características que las hacen muy atractivas y que han provocado que cada día que pasa, su uso vaya en aumento.

a) Reducen el número de solicitudes al servidor

Habitualmente, cuando en una web se hace uso de un icono, lo que hay que hacer es una llamada al servidor solicitando que nos sirva esa imagen. Lo que estamos haciendo es una llamada HTTP, lo que conlleva un gasto de recursos. Si el número de este tipo de llamadas es muy elevado, puede provocar que el rendimiento del sitio se vea afectado. Este es uno de los principales motivos de los problemas de velocidad de carga las web.

b) Evitar el uso de sprites

Los sprites son otro recurso muy utilizado en el mundo del diseño de páginas web por el que tenemos varios iconos en una única imagen gráfica. Gracias a esto, sólo hay que hacer una única llamada al servidor para que nos proporcione la imagen donde están todos los iconos, lo que reduce el tiempo de carga. El problema de los sprites, es que su creación es muy laboriosa, así como su implementación, ya que hay que estar “jugando” con la posición de cada icono que forma parte de los sprites para poder mostrarlos en la web.

c) Posibilitan el cambio del tamaño

Los iconos de imágenes, suelen tener un tamaño fijo. Si queremos utilizar un mismo icono en distintas partes de la web con diferentes tamaños, será necesario tener una imagen para cada caso. Gracias a las fuentes de iconos, esto no es un problema. Al tratarse de una fuente, podemos cambiar su tamaño sin que se pixele la imagen mediante el uso de estilos, de igual forma que hacemos con los tipos de letras. Esto es posible, porque las fuentes tipográficas son vectoriales, lo que significa que lo podemos ampliar o reducir todo lo que queramos sin que se pierda calidad. Simplemente utilizando el estilo “font-size” podremos modificar su tamaño.

d) Posibilitan el cambio del color

De igual forma que podemos cambiar el tamaño, también es posible cambiar su color mediante el uso de la propiedad CSS “color“. Gracias a ella, podemos asignarle cualquier color en formato RGB sin necesidad de tener que crear el mismo icono varias veces, pero de diferentes colores.

e) Agregar sombras y otros estilos CSS

Podemos utilizar la propiedad “text-shadow” para agregar una sombra a un icono, independientemente de su color y forma, cosa que sería muy complicado de hacer con imágenes. Pero además de esto, también sería posible aplicar otros efectos mediante el uso de propiedades CSS como puede ser el trazo, tachado, grosor…

f) Facilitan la sustitución de iconos

Si en un determinado momento estamos cansados de los iconos que utilizamos en nuestro portal y queremos cambiarlos, será mucho más fácil si hemos utilizado una fuente de iconos que si hemos utilizado imágenes. Para cambiarlos, podría ser suficiente cambiando la tipografía utilizada.

Desventajas de utilizar fuentes de iconos

No penséis que las fuentes de iconos son perfectas, porque no lo son. Tienen algunos inconvenientes, suficientes para que haya gente que opte por no utilizarlas en sus proyectos. A continuación comentaremos las principales desventajas que ofrecen los icon fonts.

a) Iconos monocromáticos

Al tratarse de una fuente, la imagen va toda de un mismo color, de ahí que se pueda cambiar su color de la forma que hemos comentado en el punto anterior. Si queremos que tenga varios colores, deberíamos utilizar un icono gráfico.

b) Otras webs pueden usar los mismos iconos

El número de fuentes de iconos disponibles en la actualidad, es mucho menor que los paquetes de iconos que nos podemos encontrar. Esto hace que sea muy fácil encontrar una página web o tienda online que haga uso de los mismos iconos que utilizas en la tuya. Si quieres exclusividad, entonces la solución pasa por utilizar iconos de imágenes.

¿Cómo utilizar las fuentes de iconos?

Si bien hay sitios que nos permiten crear nuestra propia fuente de iconos y generar desde cero el CSS para utilizarla, por ejemplo Fontello o Icomoon, lo más habitual es que utilicemos alguna de las opciones que están ya disponibles, como puede ser el paquete Font Awesome. Este paquete se caracteriza por estar compuesto por más de 360 iconos, teniendo cada uno de ellos una clase asociada.

En este caso, para hacer uso de estos iconos, lo primero sería copiar el directorio completo “font-awesome” que te puedes descargar de su página web, y ponerlo dentro de nuestro proyecto.

A continuación, dentro de la etiqueta “<head>” de nuestro código HTML, deberemos referenciar a la hoja de estilos que nos permitirá utilizar esos iconos.

<link rel=”stylesheet” href=”ruta/a/font-awesome/css/font-awesome.min.css”>

Por último, nos quedará hacer uso de esos iconos, mediante el uso de las clases que nos ofrece. El siguiente ejemplo, mostraría una cámara de foto retro.

<i class=”fa fa-camera-retro”></i> fa-camera-retro

Esta sería el icono.

Este tipo de packs son una muy buena opción que utilizar siempre que necesitemos utilizar iconos comunes.

Tipografías web. Google Fonts

De igual forma que hemos explicado que se pueden utilizar fuentes de iconos en nuestros proyectos, también es posible utilizar diferentes tipos de letra a la hora de programar un portal web. De forma habitual, se suelen utilizar dos tipos de letras diferentes. Uno de ellos para los títulos o textos en las imágenes, y otra para el resto de textos. Cabe decir, que podemos utilizar tantas como queramos y que son completamente compatibles con las fuentes de iconos.

Hay muchos tipos de tipografías diferentes que podemos utilizar en nuestro proyecto, pero destaca el uso de Google Web Fonts, un recurso online donde nos podemos encontrar más de 800 fuentes diferentes que podemos utilizar en cualquier sitio web.

Utilizar Google Fonts es muy sencillo. Una vez que entramos en ese portal, nos aparecerá el listado de fuentes que tenemos disponibles para utilizar.

Si nos ha gustado una y queremos utilizarla en nuestro proyecto, lo que deberemos hacer será pulsar sobre el icono del símbolo “+” que aparece en rojo.

Una vez seleccionada, en la parte inferior de la pantalla nos aparecerá una zona emergente que nos indicará que hemos seleccionado una fuente. Deberemos pulsar sobre el símbolo del guión que aparece en la parte derecha de esa zona.

Eso nos abrirá una pantalla con la información que necesitamos saber para empezar a utilizar esa fuente en nuestro desarrollo.

Cómo podéis ver, gracias a este recurso, es posible utilizar fuentes poco convencionales en nuestros proyectos, aportando un toque diferenciador respecto a otros sitios web.