Cómo convertir los iconos en una fuente tipográfica

El aspecto visual es importantísimo en el diseño web y cuanto más personalizado sea mejor, es por ello que uno de los recursos más utilizados es apoyarse en los iconos para destacar sobre la competencia y mejorar el reconocimiento de marca.

La parte negativa de los iconos es que tener que subir imágenes pesadas por FTP es muy lento y tedioso, además de que habría que reemplazarlas cada vez que se quisiera cambiar el color o el tamaño, o arriesgándonos a una pérdida de resolución si los hacemos muy grandes.

Puesto que el factor de velocidad de carga es uno de los factores que Google tiene en cuenta para mejorar el posicionamiento de una web, nos interesa que dicha web no tenga iconos que la ralentice.

Desde digitalDot ya te decimos que puedes acelerar la velocidad de carga de tu sitio hasta en un 14% convirtiendo tus iconos personalizados en una fuente tipográfica escalable y que, además, podrás modificar ocupando una sola línea de código, pudiendo cambiar lo que desees por CSS en todo momento sin tener que crear otro icono a mano.

Puedes acelerar la velocidad de carga de tu #web hasta en un 14% convirtiendo tus iconos personalizados en una fuente tipográfica. Compartir en X

Además, si los conviertes en una fuente serán vectores por lo que no se pixelarán o deformarán al escalarlos.

2 pasos para convertir tus iconos en fuentes

Primero, para lograr convertir tus iconos en una fuente primero tendrás que crearlos en Illustrator, Photoshop, Sketch o cualquier programa en el que puedas editar vectores.

Cuando te asegures de los trazos están expandidos sin efectos ni máscaras puedes exportarlo como un SVG.

Segundo, para convertir estos archivos SVG en una fuente hay páginas web gratuitas que puedes utilizar como Icomoon, Iconvau o Fontello. En ellas puedes encontrar además de lo que tú subas, una galería de iconos propios que puedes descargarte y utilizar. Existe además un plugin de Photoshop llamado Glifo que también puedes utilizar.

Cómo utilizar la fuente de mis iconos

Para utilizar tu nueva fuente en tu sitio web tienes que subirla por FTP a la carpeta de tu web donde guardes las demás fuentes y añadir al archivo CSS el código que te dejamos a continuación. ¡¡RECUERDA que debes cambiar la ruta y el nombre de los archivos por los tuyos ya que esto es solo un ejemplo!!.

@font-face {
font-family: '40df';
src:url('fonts/40df.eot');
src:url('fonts/40df.eot?#iefix') format('embedded-opentype'),
url('fonts/40df.woff') format('woff'),
url('fonts/40df.ttf') format('truetype'),
url('fonts/40df.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

De esta forma el navegador solo se descargará el primer formato que sea compatible, pero tendrá opciones entre las que elegir y el exceso de código no supone más peso.

Cómo nombrar cada icono individualmente

Después hay que añadir las clases para poder nombrar cada icono de manera individual. Incluiremos algo como esto:

.icon-twitter:before {
content: "\e000";
}
.icon-facebook:before {
content: "\e001";
}
.icon-dribbble:before {
content: "\e002";
}

Si es tu primera vez utilizando código no te preocupes, cuando generes los archivos de fuente con las webs anteriores incluirán un CSS con los códigos que tendrás que copiar al CSS de tu web.

Cómo llamar a tus iconos en HTML

Para llamar a tus iconos en HTML debes el siguiente código:

<span class="icon-twitter"></span> Twitter

Cómo modificar un icono específico

También debes usar CSS para modificar un icono en concreto, ejemplo:

a .icon-twitter {
color: #41b7d8;
}
a:hover .icon-twitter{
color: #005580;
size: 40px;
}

Otros colores corporativos de redes sociales son, por ejemplo, #3b5997 de Facebook o #0073b2 de LinkedIn.

Recuerda aprovecharte de esta ventaja a la hora de hacer destacar tu página web. Usando iconos convertidos en fuentes aprovechas toda la personalización que permite la creación de iconos propios que te representen con las ventajas de una fuente escalable y modificable que no requiere grandes esfuerzos.

Si quieres que tu página web cuente con un diseño moderno y adaptado a todo tipo de dispositivos puedas contactar con digitalDot y pregunta por nuestro equipo de expertos en diseño web y diseño de tiendas online. Haremos que tu próximo proyecto destaque sobre la competencia. ¡¿Quieres?!