Cómo cargar Font Awesome a tu web

Para cargar la popular fuente de iconos, Font Awesome, a tu sitio web, existen dos opciones: la opción compleja que consiste en descargar una ingente cantidad de archivos a tu servidor o la opción sencilla, que consiste en recurrir al inefable archivo functions.php y añadir las siguientes líneas de código:

//* Cargar Font Awesome
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

MaxCDN ofrece a Font Awesome la gran posibilidad de utilizar sus servicios y de esta forma nos libramos de tener que descargar nosotros toda la fuente.

Como ves, el código carga exactamente la versión 4.7.0 de la fuente de iconos Font Awesome, por lo que te sugiero que lo visites con regularidad para comprobar que no haya aparecido una nueva versión. En este caso, simplemente has de cambiar el número 4.7.0 por el de la nueva versión.

¿Qué es Font Awesome?

cargar font awesomeFont Awesome es una fuente gratuita que ofrece cientos de iconos para tus proyectos web. Creada por Dave Gandy, Font Awesome brinda la posibilidad de usar vectores de iconos escalables, que pueden ser personalizados en su color, tamaño, sombra y cualquier otra cosa que seas capaz de hacer utilizando las maravillosas CSS (Cascade Style Sheet u hojas de estilo en cascada).

De esta forma, es posible reemplazar imágenes, que son más lentas de cargar por su peso, por los iconos de esta fuente. Uno de los ejemplos más utilizados es el icono del carrito de Woocommerce. En el pie de página de este blog, podrás ver otros ejemplos de estos iconos.

¿Y una vez cargada la fuente Awesome, cómo se implementa?

Es muy sencillo, vas a la web que provee los iconos, eliges el que más te gusta y haces click sobre él para obtener el código.

Así se implementa el código en el html de tu proyecto web:

<!--  Implementación en el código fuente -->

<a href="aqui-pones-la-url-del-carrito.php"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
&nbsp;Ir al carrito</a>

 

Ventajas de Font Awesome

  • No requiere JavaScript.
  • Escalabilidad infinita.
  • Gratuita para uso comercial.
  • Se controla mediante CSS.
  • Originalmente diseñada por Bootstrap, Font Awesome funciona perfectamente con cualquier framework.

¿Qué es Bootstrap?

Bootstrap es un framework desarrollado por Twitter, cuya misión es la de facilitar el trabajo del diseño web. Gracias a su entorno de trabajo, se hace mucho más simple diseñar webs responsive (que se adapten a todos los dispositivos y pantallas).

Twitter lo ha liberado, por lo que Bootstrap es un framework de código abierto, esto significa que puedes usarlo en tus proyectos privados o comerciales sin ningún tipo de restricciones.

¿Tienes alguna dificultad para implementarla? Déjalo en los comentarios para que pueda ayudarte.

Marcar el Enlace permanente.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos
Responsable Carlos González-Román Ferrer. +info....
Finalidad Gestionar y moderar tus comentarios.. +info...
Legitimación Consentimiento del interesado. +info...
Destinatarios No se cederán datos a terceros, salvo obligación legal. +info...
Derechos Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.
Información adicional Puedes consultar la información adicional y detallada sobre protección de datos en nuestra página de política de privacidad.