Vue Font Awesome

En el mundo del desarrollo web a menudo nos vemos en la necesidad de implementar iconos web en nuestros proyectos, los cuales permitan ofrecer una mejor experiencia de usuario. Inicialmente se buscó resolver esta necesidad con el uso de imágenes en formatos .jpg, .png y .gif siendo esta última el más recomendado en su momento. Esta solución aunque funcional no resulta muy práctica ni óptima debido al peso de las imágenes (tiempo de carga) y a la falta de uniformidad cuando necesitábamos agregar varios iconos a nuestro sitio. Para resolver estas limitaciones surgieron las fuentes web de iconos.

Ventajas de su uso

Las fuentes web ofrecen muchas ventajas a la hora de su implementación. Primeramente son más livianas que las imágenes, ademas son vectoriales lo que garantizan su correcta visualización en cualquier dispositivo sin deformarse o perder calidad. Además ofrece uniformidad ya que a la hora de implementar estas fuentes su diseño es similar y con el uso de CSS puede ser modificable.

En el mercado existen muchas fuentes de iconos pero una de las más populares desde hace algunos años es Font Awesome la cual puedes ver con más detalle en su sitio web https://fontawesome.com/ Esta fuente ofrece paquetes de iconos free y premium, pero créanme cuando les digo que la versión free es bastante generosa.

Font Awesome en su versión 5

A partir de su versión 5, Font Awesome dio un gran cambio optimizando el peso de su librería así como agregando y mejorando la calidad de los iconos que ofrecen.  Una de sus características más interesante es la posibilidad de incorporar los iconos directamente  dentro los frameworks Javascript más populares tales como React, Angular y Vue, sobre la implementación en este último quiero contarles.

Para realizar los pasos que siguen a continuación es importante tener conocimientos previos de Vue.

En Styde contamos con un excelente curso de Vue que te puede permitir adentrarte en este maravilloso framework y conocer a profundidad las bondades que ofrece. Puedes revisarlo en: https://styde.net/curso-de-vue-2/

Creando un proyecto

Para crear el proyecto usaremos vue-cli para ello vamos a abrir una terminal, dirigirnos al directorio de nuestra preferencia y ejecutar el siguiente comando:

vue create <nombre del proyecto>

En mi caso lo llamaré vue-fontawesome de esta manera:

Te va a solicitar cuáles opciones quieres instalar al proyecto y en este caso a modo de práctica solo dejaré las opciones básicas seleccionando la opción Manually select features:

select Manually select features

En mi caso solo marqué Babel:

select Babel in vue-cli

Por último selecciono la opción In package.json:

option In package.json in vue-cli

Ya queda de ti si deseas guardar este preset para futuros proyectos.

Una vez se instalen todas las dependencias procede a abrir el proyecto con tu editor favorito, en mi caso estaré utilizando Visual Studio Code pero tu puedes utilizar cualquiera y procede ahora en la terminal a ejecutar el comando npm run servepara inicializar el proyecto.

Si vas al navegador y abres la url: localhost:8080 deberías ver una vista parecida a ésta:

Font Awesome Screenshot

Instalando Font Awesome dentro de Vue

Ciertamente existen muchas formas de utilizar Font Awesome en un proyecto: puedes incluirlo a través de un CDN, puedes descargar la librería y agregar los archivos manualmente, pero en mi caso, lo instalaré a través de npm ya que esto me permitirá solo agregar los iconos de la librería que vaya necesitando y no toda la librería completamente.

Ejecuta estos tres comandos en una terminal (uno a la vez) para agregar la librería y los componentes que necesitas:

El primer comando incluye el núcleo de la librería, el segundo el paquete de iconos solid el cual contiene los iconos free y el tercer comando instalará el plugin de Font Awesome para vue que permitirá incluirlos como un componente.

La documentación oficial te sugiere agregarlos directamente dentro del archivo main.js, sin embargo, considero esto poco óptimo ya que estaríamos llenando este archivo de llamadas a los iconos que vayamos necesitando y esto no debería ser su funcionalidad.

En mi caso y por lo simple del ejemplo vamos a crear un directorio plugins donde incluiremos un archivo Javascript para importar Font Awesome en el proyecto. Este directorio debemos crearlo dentro de src:

directorio del proyecto con la carpeta plugins

Ahora dentro de este directorio creamos el archivo Javascript. Puedes llamarlo como quieras pero sugiero que el nombre esté relacionado con su contenido. En mi caso lo llamaré fontawesome.js

Dentro de este archivo agregamos las siguientes instrucciones:


La primera instrucción hace el llamado al core de Vue el cual es necesario, el segundo import se encarga de agregar el core de Font Awesome, la siguiente instrucción es donde vamos a ir agregando entre las llaves {} el nombre de los iconos que vayamos necesitando en formato camelCase. En nuestro caso y a modo de ejemplo estoy incluyendo el icono de una casa, el último import se encarga de llamar el plugin de Font Awesome para Vue.

La instrucción library.add()se encargará de ir agregando los iconos que necesitemos. Los nombres aquí deben ser iguales a los nombres del tercer import donde agregamos los iconos que necesitamos.

Finalmente, la última instrucción se encarga de generar un componente de Vue al que llamaremos font-awesome-icon y le pasaremos nuestro plugin de Font Awesome para Vue FontAwesomeIcon.

Ya con esto solo nos queda incluir nuestro archivo dentro de main.js para tenerlo global en todo el proyecto, aunque también pudiésemos agregarlo solo en los componentes que lo vayamos requiriendo.

Para ello, en el archivo main.js agregamos la instrucción:

Ya para probar que todo va bien, vamos al componente donde requerimos nuestros iconos (en mi caso utilizaré el archivo App.vue) y llamamos el icono dentro del template (previamente elimino todo el contenido del template de App.vue para mostrar únicamente el icono)

Si todo sale bien deberíamos ver en el navegador algo como esto:

uso de icono de Font Awesome en el proyecto

De esta manera podemos ir agregando los iconos que vayamos requiriendo como un componente y no la carga de toda la librería de Font Awesome lo cual se verá reflejado en una optimización en cuanto a los tiempos de carga de nuestro proyecto y del código que escribimos.

Ejemplo práctico

Para no dejar el tema con algo tan básico vamos a crear una barra de navegación con nuestros nuevos iconos. En este caso para no complicar más el ejemplo voy a agregar el framework CSS Bootstrap a través de un CDN en nuestro archivo index.html:

Ahora en el archivo App.vue vamos a agregar el siguiente código dentro de las etiquetas template:

Si vamos al navegador deberíamos ver lo siguiente:

barra de navegación en el proyecto

Lo siguiente es ir a nuestro archivo fontawesome.js e ir incorporando los iconos que necesitemos. En este ejemplo agregaremos iconos para los enlaces de Home, About Us, Portfolio y Contact. Los iconos utilizados en este ejemplo fueron los de home, building, images y at. En la web de Font Awesome puedes ubicarlos con esos nombres.

Nuestro archivo fontawesome.js debe quedar ahora de la siguiente forma:

Con los nuevos iconos agregados podemos ir a nuestro archivo App.vue y remplazar el contenido dentro de las etiquetas template con el siguiente:

Aquí podemos observar en la zona de navbar que hemos agregado nuestros iconos de Font Awesome como un componente a través de la etiqueta <font-awesome-icon icon="nombre icono" />Si ahora nos dirigimos al navegador deberíamos verlos agregados en nuestra barra de navegación:

barra de navegación con iconos de Font Awesome

¡Listo! Espero que este tutorial te ayude agregar esta librería a tus proyectos y si te gustó por favor compártelo y deja tu comentario con tu feedback.

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Material relacionado

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.