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 re­fe­re­n­cia a aquellos tipos de letra basados en vectores que en lugar de contener letras contienen pi­c­to­gra­mas fu­n­cio­na­les. Los de­sa­rro­lla­do­res web que se animen a usarlas obtendrán los be­ne­fi­cios derivados de los vectores es­ca­la­bles gratuitos. Al contrario de lo que ocurre con las fuentes pixeladas, las fuentes ve­c­to­ria­les serán definidas in­de­pe­n­die­n­te­me­n­te del di­s­po­si­ti­vo de salida en pri­mi­ti­vos gráficos como líneas, círculos, polígonos o curvas. Esto da lugar a una cómoda tra­n­s­fo­r­ma­ción sin pérdidas basada en CSS. Los iconos co­rre­s­po­n­die­n­tes no se cargarán ni se mo­di­fi­ca­rá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 co­n­s­ti­tu­ye la base para la icon font deberá estar integrado en el en­ca­be­za­do de HTML. Los iconos in­di­vi­dua­les, por su parte, se integran en la página web a través del atributo HTML “class”. Para saber cómo funciona, a co­n­ti­nua­ción te mostramos un ejemplo de la fuente de código abierto Font Awesome.

Font Awesome es una de las mayores co­le­c­cio­nes gratuitas de iconos ve­c­to­ria­les y contiene más de 600 iconos. Para poder integrar icon fonts en una página web, los de­sa­rro­lla­do­res web necesitan obtener el pack de in­s­ta­la­ción, que se puede descargar desde la página web de Font Awesome. La in­te­gra­ción de las icon fonts se realiza en tres pasos:

1. Descarga del pack de in­s­ta­la­ción

2. In­te­gra­ción de la hoja de estilo (st­y­le­sheet) en el en­ca­be­za­do del documento HTML deseado: para integrar Font Awesome en una página web es necesario enlazar el documento HTML co­rre­s­po­n­die­n­te con el pack de in­s­ta­la­ción que contiene el archivo CSS estándar “font-awesome.min.css”, para lo que habrá que in­tro­du­cir el siguiente código en el en­ca­be­za­do de HTML:

El es­pa­cia­dor "path/to/" sustituye a la ruta del archivo del proyecto web en el servidor.

3. In­te­gra­ción de iconos: si se ha creado el vínculo al archivo CSS, ya se pueden integrar los pi­c­to­gra­mas descritos en la icon font en cualquier parte del código fuente HTML. Para ello, se puede utilizar un elemento “i” vacío en co­m­bi­na­ción con el atributo “class”. Las clases  resultan del prefijo CSS “fa” y del nombre del icono co­rre­s­po­n­die­n­te:

El código de in­te­gra­ción de cada icono puede obtenerse de la página web de Font Awesome.