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.
Integrar iconos con 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:
| <link rel="stylesheet" href="https://www.ionos.mx/digitalguide/path/to/font-awesome/css/font-awesome.min.css"> |
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:
| <i class="fa fa-home"></i> |
El código de integración de cada icono puede obtenerse de la página web de Font Awesome.
Artículos similares
Icon fonts: diseño web con pictogramas vectoriales
Las icon fonts permiten integrar pictogramas vectoriales en una página web. A diferencia de los tradicionales gráficos en mapa de bits, los iconos vectoriales tienen la ventaja de ser escalables sin perder su calidad. Además, la integración a través de CSS (Cascading Style Sheets) ofrece amplias y sencillas posibilidades de configuración dentro del mismo código fuente. Por otro lado, muchos…
La tipografía responsiva: conceptos básicos
En Internet se encuentran gran cantidad de textos con diferentes tipos de letra. La expansión del diseño web responsivo también influye en la tipografía web, ya que la representación de la letra debería ajustarse siempre a la pantalla del dispositivo que se usa para asegurar la legibilidad de los contenidos. Una tipografía capaz de responder a estos ajustes debe ser flexible y usar las fuentes que…
Tipografía responsiva: elige la fuente más adecuada para tu web
La gran oferta de fuentes y familias tipográficas en Internet es cada vez mayor, incluyendo aquellas de código abierto que pueden ser descargadas de forma gratuita. La mayoría de estas fuentes web son adaptables, lo que las hace perfectas para su implementación en páginas web responsivas, es decir, aquellas que adaptan su visualización a diferentes dispositivos. Conoce algunas de las plataformas…
Tipografía para el diseño responsivo con CSS
A menudo, se subestima a la tipografía web como parte fundamental del diseño responsivo de páginas web, a pesar de que la creación de fuentes adaptables no es ninguna ciencia inaccesible. ¿Cómo se aplican en la práctica? Y ¿qué fuentes web son las mejores para un diseño web responsivo? Te mostramos los aspectos técnicos fundamentales para la implementación de tipografía con CSS en una web…
Añadir iconos a WordPress: explicación sencilla
Los iconos de WordPress no solo mejoran el aspecto de tu página, sino que también facilitan la navegación. Sobre todo, las icon fonts ofrecen muchas ventajas y convencen con numerosos pictogramas diferentes para cada propósito. En este artículo, te explicamos qué son las icon fonts, cómo añadir iconos a WordPress y dónde encontrar estos símbolos.
