Cómo integrar una icon font en un documento HTML

Como ya se expuso en el artículo que explicaba el concepto de icon font, dicho término hace referencia a aquellos tipos de letra basados en vectores que en lugar de contener letras contienen pictogramas funcionales. Los desarrolladores web que se animen a usarlas obtendrán los beneficios derivados de los vectores escalables gratuitos. Al contrario de lo que ocurre con las fuentes pixeladas, las fuentes vectoriales serán definidas independientemente del dispositivo de salida en primitivos gráficos como líneas, círculos, polígonos o curvas. Esto da lugar a una cómoda transformación sin pérdidas basada en CSS. Los iconos correspondientes no se cargarán ni se modificarán por separado en los programas de diseño gráfico, sino que el formateo básado en código se llevará a cabo en el navegador web. Además, uno de los archivos CSS que constituye la base para la icon font deberá estar integrado en el encabezado de HTML. Los iconos individuales, por su parte, se integran en la página web a través del atributo HTML “class”. Para saber cómo funciona, a continuación te mostramos un ejemplo de la fuente de código abierto Font Awesome.

Font Awesome es una de las mayores colecciones gratuitas de iconos vectoriales y contiene más de 600 iconos. Para poder integrar icon fonts en una página web, los desarrolladores web necesitan obtener el pack de instalación, que se puede descargar desde la página web de Font Awesome. La integración de las icon fonts se realiza en tres pasos:

1. Descarga del pack de instalación

2. Integración de la hoja de estilo (stylesheet) en el encabezado del documento HTML deseado: para integrar Font Awesome en una página web es necesario enlazar el documento HTML correspondiente con el pack de instalación que contiene el archivo CSS estándar “font-awesome.min.css”, para lo que habrá que introducir el siguiente código en el encabezado de HTML:

El espaciador "path/to/" sustituye a la ruta del archivo del proyecto web en el servidor.

3. Integración de iconos: si se ha creado el vínculo al archivo CSS, ya se pueden integrar los pictogramas descritos en la icon font en cualquier parte del código fuente HTML. Para ello, se puede utilizar un elemento “i” vacío en combinación con el atributo “class”. Las clases  resultan del prefijo CSS “fa” y del nombre del icono correspondiente:

El código de integración de cada icono puede obtenerse de la página web de Font Awesome.