Iconos para todos: cómo usar Font Awesome con WordPress

Font Awesome es una de las fuentes de iconos más populares en todo el mundo. Por ahora, más de 60 millones de sitios web use la fuente para mostrar pictogramas en todos los colores y versiones. Estos 60 millones de sitios web incluyen whitehouse.gov, thebeatles.com y washingtonpost.com. En este artículo, le mostraremos cómo puede usar los íconos para su blog.

Actualmente, Font Awesome proporciona 634 pictogramas para una gran cantidad de aplicaciones. Por ejemplo, es posible usarlos para crear íconos de seguimiento social, como hice en mi blog.

Las ventajas de la fuente Icon “Font Awesome”.

En comparación con los gráficos usados, una fuente de iconos ofrece generosos beneficios. Los iconos se pueden escalar maravillosamente, lo que permite mostrarlos en cualquier tamaño deseado. Además de eso, puedes ajustarlos para que tengan los colores en los que quieres que brillen.

Esto podría ser sustancial para un sitio web comercial si hay una identidad corporativa a la que apegarse. Los ajustes se realizan a través de CSS. Por lo tanto, todo lo que CSS puede hacer es posible. El tamaño, los colores, la sombra del texto y mucho más son posibles.

En la siguiente página, puede echar un vistazo a los 634 íconos en una descripción general.

Cómo usar Font Awesome en tu tema

Hay dos opciones de cómo usar la fuente en su tema. Te los presentaré uno por uno. El método que elija depende de si le gusta la forma más fácil de usar complementos o el trabajo manual más tedioso. De cualquier manera, encontrará el método adecuado para usted en este artículo.

1 – Trabajo manual. Solo vinculamos el archivo CSS

Antes de usar los íconos, necesita el CSS para la fuente del ícono. El proveedor de servicios de CDN KeyCDN ha alojado la fuente en sus servidores. De esta manera, un simple enlace al archivo en el sitio web de su encabezado es suficiente. Un pequeño fragmento de código que debe copiar en su tema functions.php se encarga de eso.

Puedes elegir entre dos métodos. El código número uno vincula el archivo CSS en el encabezado de tu blog. El código dos es ideal si desea optimizar la velocidad de su sitio web. Luego, el archivo se carga en el pie de página.

https://gist.github.com/anonymous/b4b2ce4d8af44503e501f70f86f3173b

https://gist.github.com/anonymous/27c9e331dd9a08a59cbc863bb31f4a17

Ahora, ya puede usar los íconos. Tienes dos opciones para la aplicación manual. La opción número uno es la etiqueta , proporcionada para cada ícono por Font Awesome. Echa un vistazo a un montón de ejemplos en la página de ejemplo.

Ajustar el tamaño del icono es así de simple.

Sin embargo, no está atado a la etiqueta , sino que también puede definir y usar los íconos en el CSS. Esto es útil para áreas que no toleran bien el marcado adicional. Por cierto, Less y Sass son compatibles con CSS puro.

Cuando hace clic en un icono en la página de descripción general de Font Awesome, llega a una página donde se muestra la etiqueta particular. Por encima de eso, también encontrará el llamado Unicode, que se requiere para el uso en el archivo CSS.

Una parte de mi CSS para los botones de seguimiento social (captura de pantalla anterior) tiene el siguiente aspecto:

https://gist.github.com/anonymous/791df49ad67685ccdfbf5558d657091b

Encuentre el Unicode aquí:

Uso de la fuente del icono en el editor de WordPress

Por supuesto, también puede usar los íconos ordenados directamente dentro del editor de WordPress al escribir sus artículos. Para hacer eso, debe visitar el área de texto e ingresar la etiqueta correspondiente donde desea que aparezca.

Visita la página de resumen de Font Awesome, elija un icono y haga clic en él. En la página siguiente, encontrará la etiqueta adecuada para ese icono.

2 – Easy Peasy, usando el complemento »Better Font Awesome.«

• Desarrollador: Mickey Kay
• Trabajo en progreso: sí
• Última versión de: 06.01.2016
• Costos: gratis a través de WordPress.org
• Licencia: LICENCIA PÚBLICA GENERAL GNU
• Problemas de compatibilidad conocidos: desconocido
• Página de inicio del desarrollador: Desconocido
• Descargar en WordPress.org

El uso de este complemento no ralentizará su blog, ya que el archivo CSS necesario se carga a través de jsDelivr CDN. El complemento es perfecto para los principiantes de WordPress, ya que no requiere ningún conocimiento de programación.

Con este complemento, usar los íconos es muy fácil. Hay tres formas de usarlos.

Numero 1: Directamente dentro del editor de WordPress con un generador cómodo.

Número 2: Uso de códigos cortos

[icon name="flag" class="2x spin border"]

Numero 3: La conocida etiqueta HTML

<i class="fa fa-check-square-o" aria-hidden="true"></i>

La configuración del complemento:

Encuentre la configuración en »Configuraciones => Mejor Fuente Impresionante«.

Aquí, puede elegir qué versión de Font Awesome desea usar. Se recomienda la versión más reciente, actualmente la versión 4.6.3. La segunda opción crea un archivo CSS comprimido que se carga más rápido. Deberías marcar eso.

La tercera opción hace que otros archivos de Font Awesome que utilizan otros complementos se eliminen de «Better Font Awesome». También debe marcar eso, ya que una versión del archivo es completamente suficiente.

La cuarta área en la configuración es una ayuda para usted si desea utilizar el código abreviado o la etiqueta HTML.

También hay una versión de JavaScript

Correcto. Existe. Puede ingresar su dirección de correo electrónico en el elemento del menú «comenzar» para recibir un código JavaScript que siempre mantiene la fuente del ícono actualizada.

Sin embargo, este código tiene un gran inconveniente. Aunque puede asegurarse de que el código se entregue de forma asíncrona después del registro, todavía se carga con bastante lentitud. Lo probé para este artículo y no me impresionó. Mi sitio web era 400 milisegundos más lento que con un archivo CSS vinculado.

Por lo tanto, no puedo recomendar esta variante.

Conclusión

Ahora, te presenté dos formas de usar los geniales íconos de Font Awesome. Si prefiere la versión manual o la del complemento, depende de usted. Recomiendo ambas variantes, excluyendo solo la versión de JavaScript.