¿Tienes un proyecto en mente? CuéntanosloUsar iconos en una web es siempre una idea notable por lo mucho que pueden aportar. Entre las diferentes y variadas fuentes disponibles, Font Awesome está entre las más famosas, utilizadas y funcionales. Veamos el porqué.
Font Awesome icons: ¿Qué son?
Es posible que encuentres iconos con estética desfasada que no te atraen. Sucede mucho mientras creas una web en WordPress o en algún otro editor. Es normal, ya que las fuentes disponibles, ya sean de pago o gratuitas, no suelen estar tan actualizadas como las que se usan en redes sociales, por ejemplo.
Por fortuna, Font Awesome icons son la solución descargable y gratuita. ¿Es posible? En efecto, estos iconos vectoriales y escalables son tan utilizados que hasta se han transformado en un estándar web.
Hoy en día son tan familiares y usables que no hace falta personalizarlos, crearlos desde cero ni comprarlos gastando un dinero del que no se dispone. con FA, que es como se conoce de forma popular, un diseñador web encuentra una fuente inagotable de posibilidades para hacer crecer cualquier site.
Probablemente los iconos Font Awesome son los más fácilmente instalables, ofreciendo un repositorio personalizable y de uso común que se utiliza con libertad y se puede añadir de forma manual o por medio de un plugin de WordPress, por ejemplo.
En total, puedes disfrutar de más de 1500 iconos con licencia libre y gratuita, mientras que la versión pro ronda los 7500. No obstante, se hacen actualizaciones periódicas interesantes, por lo que las posibilidades no dejan de crecer, ya que con cada nueva llegada de versiones novedosas se añaden iconos en cantidad notable.
Historia de los iconos Font Awesome
Basados en CSS y Less, fueron creados por Dave Gandy para usarlos con Bootstrap, aunque después incorporó BootstrapCDN.
Hoy en día cubren un amplio abanico de mercado en Google Fonts. De hecho, tienen tanto éxito los iconos de la fuente Awesome que en 2020 se lanza la versión Font Awesome 6, mientras que la versión 5 fue publicada en 2017.
Font Awesome 5
Como decimos, desde 2017 tenemos disponible la versión Font Awesome 5, la última en llegar que sustituyó a Font Awesome 4 y que se puede usar bajo las licencias Creative Commons Attributions 4.0, MIT License o SIL Open Font License.
Pero todavía hay más. A día de hoy sigue teniendo una versión gratuita y una Pro con miles de opciones cada una de ellas. No obstante, en breve llegará la nueva Font Awesome 6 con más posibilidades. En principio, se espera para finales de 2020.
Beneficios de usar iconos Font Awesome en una página web
Los beneficios del uso de Font Awesome en CSS son muy numerosos. Da igual dónde los uses, siempre tendrán ventajas magníficas. Entre las más interesantes destacan estas:
- Reduce el número de llamadas al servidor. Al cargar el código fuente, se cargan infinidad de iconos. El servidor no ha de hacer una llamada individual con cada uno.
- Se limita el peso de la web. Usando Font Awesome, cada archivo fuente tiene un peso de 5 a 50 Kb, mucho menos que si tuviéramos que cargar cada icono de forma individual.
- Manejo de tamaños. También permite gran libertad a la hora de elegir tamaños de iconos Font Awesome. Se modifican por CSS, tal y como si fuera una fuente de texto.
- Uso de Font Awesome en el color web que se quiera. Se pueden cambiar con libertad.
- Permiten la aplicación de diversos estilos.
¿Cómo se utilizan los iconos Font Awesome? Guía básica para WordPress
Comencemos por WordPress, ya que la mayor parte de las webs que se diseñan en la actualidad utilizan esta plataforma. ¿Cómo usar los iconos Font Awesome? Veamos las opciones disponibles:
- WordPress mejora mucho su rendimiento gracias a los plugins. En este caso se ha de usar el llamado Font Awesome Integration. Tan solo hay que instalarlo, activarlo y añadir el shortcode correspondiente del icono que se desea insertar. También se pueden subir más a través del plugin Shortcodes Ultimate.
- Utilizados por WordPress en su back-end, están incluidos por omisión. Para su uso, se suben al front-end, para lo que es necesario saber el nombre del script y el archivo ya disponible en WordPress.
- De forma manual: es la más compleja y menos eficiente. En este caso es necesario enlazar de forma manual con la fuente de iconos Font Awesome o cualquier otra que se utilice. Para ello se copia el código en el Head de una plantilla y se coloca el icono en el Cuerpo del HTML.
Descarga e instala Font Awesome en tu web
¿Merece la pena instalar Font Awesome en una web? Técnicamente sí, aunque plantea un problema. Recordemos que esta plantilla incluye miles de iconos y, aunque están muy reducidos en peso, ¿realmente necesitas tanta cantidad para tu proyecto online? Si optas por la versión Pro, son varios miles de ellos.
Lo cierto es que Font Awesome ocupa poco espacio, pero podría provocar errores de desempeño en el site. Por eso, si observas que siempre utilizas los mismos iconos, ¿no sería mejor descargar solo esos que usarás de forma común y continuada? Así reducirás el peso y la web funcionará con menor tiempo de carga.
Sea como fuere, la versión gratuita, más que suficiente en casi todos los casos, tiene tres veces menos iconos, y aun así son más de mil. Tenlo en cuenta si los vas a descargar todos.
- Sea como fuere, para descargar e instalar, primero accede a la web oficial de Font Awesome icons y pincha en Download en el botón Font Awesome Free for the Web.
- Tienes un archivo zip descargado que, a continuación, has de descomprimir.
- Mueve el directorio hasta el tema de WordPress o de la web que utilices.
- Luego, para instalar, tendrás que añadir el código recibido en un plugin personalizado o bien en el archivo funtions.php del tema hijo.
- Accede a la galería de iconos para comprobar que todo ha ido bien.
Además, estas fuentes se pueden integrar en diversos tipos de webs. Veamos:
- Sitio web estático de cualquier plataforma.
- Diseño web en WordPress.
- Otros sitios personalizados y creados desde cero.
Configuración de Font Awesome
Desde la galería de iconos, puedes ver todos cuantos has instalado. Para configurar, sigue estos pasos:
- Copia el código HTML que aparece.
- Añade clases CSS en style.css si quieres cambiar el estilo.
- Modifica el style.css en elementos HTML con las clases CSS.
- Aplica los estilos CSS cada vez que escribas un enlace y aparecerán de forma automática.
Cómo añadir iconos por CSS
Veamos ahora cómo podemos usar Font Awesome añadiendo los iconos vía CSS:
- Si no tienes posibilidad de cambiar el HTML en tu proyecto, puedes aprovechar la característica CSS para agregar cualquier icono en una página web.
- Recuerda que si sigues este proceso que hemos comentado con CSS, se vuelve más complejo el uso de los iconos Font Awesome, que, a su vez, están diseñados para una utilización simple sin modificación del HTML.
- Necesitas conocer el código para cada icono.
- Tienes que manejar de forma manual el tamaño del icono.
- También controlarás de manera manual la posición.
- Asignarás las clases a elementos HTML.
- Piensa en lógica de cascada a la hora de usar Font Awesome en CSS.
Elaborar el menú
Puedes elaborar tu propio menú en base a Font Awesome según color, icono, tamaño, funcionalidad, etc.
Para añadir iconos a los menús, sigue este sencillo tutorial:
- Asegúrate de que has activado la casilla de clases CSS.
- A continuación, administra los menús.
- Después, trabaja en el personalizador.
- Continúa con la edición de cualquier elemento de menú en la nueva caja en la que has de aplicar las clases CSS.
- Continúa con la elección del icono que vas a añadir a tu lista de menús. Recuerda que tienes miles donde elegir.
- Seleccionado el icono, verás la clase a introducir.
- Haz clic en ella y verás que se copia de forma automática. Luego, introdúcelo en la caja de la clase CSS.
- Verás que aparece el icono justo antes que la etiqueta de navegación.
Este mismo tutorial para añadir iconos en menús te permite subirlos en cualquier otro contenido de tu web, ya sea un widget u otro. Con copiar la clase CSS y pegarla ahí donde se mostrará será más que suficiente. Una vez acabes, comprueba dónde queda mejor integrado para que se vea perfecto en el contenido.
Recuerda también que esta labor se debe realizar en HTML, no directamente en el widget de texto, en un bloque de párrafo o en un editor visual.
Cómo aumentar el tamaño de los iconos
Los iconos de Font Awesome, por defecto, van a heredar el tamaño que tengan en el contenedor desde el que los hayamos añadido. Por fortuna, esto se puede cambiar para adaptarlos y personalizarlos a nuestras necesidades.
¿Cómo jugamos con el tamaño de los Font Awesome icons? Veamos:
- Añade un elemento a tu clase CSS. Ahí indicarás el tamaño que vas a utilizar.
- Si es el código completo para entradas, widgets u otros elementos, cambiará.
En realidad, simplemente se añade la indicación al final, por lo que especificamos el tamaño en que se mostrará el contenedor para que varíe su imagen por defecto. Para ello, puedes usar una tabla con tamaños estándar para que sepas cuáles aplicar y cómo se hace fácilmente.
Conclusiones
Los iconos FA, como son conocidos en ciertos círculos profesionales, ofrecen un potencial enorme para cualquier web. Por ejemplo, para los footer, para los menús de navegación, etc. Es decir, todo cuanto pueda imaginarse podrá hacerse realidad.
Hoy en día, Font Awesome icons es la fuente de referencia en el mercado, sobre todo por la amplia base de iconos gratuita que tiene. Además, se actualiza cada cierto tiempo llegando ya a su versión 6.
En Galerna Estudio, sin duda, creemos que actualmente es necesario contar con Font Awesome para todo proyecto, ya esté creado bajo el auspicio de WordPress o cualquier otra plataforma. El beneficio para la web es notable.
Fuentes : Flama Studio, Falcon Masters, Ali Hossain
