Cómo Agregar Iconos de Font Awesome a WordPress – La Guía Completa

De eso se trata esta guía. Cuando termines de leer, sabrás exactamente cómo:

• Agregue manualmente la hoja de estilo Font Awesome a WordPress
• Agregue Font Awesome a WordPress con un complemento gratuito
• Inserte y diseñe iconos de Font Awesome en una variedad de formas diferentes

Vamos a profundizar en…

Por qué debería tomarse el tiempo para agregar iconos de Font Awesome a WordPress

Los íconos de Font Awesome son increíbles porque, como su nombre indica, son una fuente de ícono, en lugar de imágenes. Eso significa que puedes hacer cosas geniales como:

• Cambia el tamaño sin perder calidad porque los iconos son vectores
• Cambie colores, agregue animación y use otras manipulaciones de CSS

Todo eso para decir que los íconos de Font Awesome son muy superiores a solo usar una imagen estática.

Primero, le mostraré dos formas diferentes de agregarlos a su sitio. Luego, te mostraré cómo puedes diseñar y manipular tus íconos (sin importar el método que elijas).

Cómo Agregar Manualmente Iconos de Font Awesome a WordPress

Si te asusta la idea de profundizar en el código de tu tema, te recomiendo que saltes a la siguiente sección, donde te mostraré cómo agregar íconos de Font Awesome a WordPress usando un complemento gratuito.

De lo contrario, me gusta este método como una forma agradable y liviana de poner en funcionamiento Font Awesome.

Básicamente, todo lo que necesita hacer es agregar la hoja de estilo Font Awesome a su tema de WordPress. Luego, puede comenzar a insertar íconos de Font Awesome y diseñarlos como desee.

Así es como funciona todo el proceso, paso a paso:

Paso 1: Ponga en cola la hoja de estilo Font Awesome en su tema de WordPress

Como dije, su primer paso es agregar la hoja de estilo CSS de Font Awesome a su tema de WordPress. Si bien puede obtener esto directamente desde el sitio web de Font Awesome, mi método preferido es usar la versión alojada en Bootstrap CDN.

Actualmente, ese enlace es:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Pero cambiará a medida que Font Awesome lance nuevas versiones. Por lo tanto, es una buena idea actualizar periódicamente el enlace a la última versión (aunque las versiones anteriores seguirán funcionando).

Para agregar esta hoja de estilo a WordPress, debe ponerla en cola en el archivo functions.php de su tema secundario . Si bien el método básico para agregar CSS es poner el enlace en su encabezado, es una buena práctica usar la función especial de puesta en cola de WordPress en lugar de colocar la hoja de estilo directamente en su encabezado.

Además, el uso de un tema secundario garantiza que sus cambios no se sobrescriban si alguna vez necesita actualizar su tema.

Debido a que seguir las mejores prácticas del código de WordPress es algo bueno, definitivamente recomiendo que use un tema secundario y la función de poner en cola.

Bien, aquí está cómo hacerlo:

Vaya a Apariencia → Editor y seleccione el archivo functions.php para su tema hijo.

Luego, pega este código:

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

¡Asegúrate de guardar los cambios y listo! No es demasiado doloroso, ¿verdad?

Paso 2: Inserte iconos de fuentes impresionantes

Una vez que haya puesto en cola la hoja de estilo, puede insertar íconos de Font Awesome en su sitio yendo a la búsqueda de íconos de Font Awesome y encontrando el ícono que desea insertar:

Cuando hace clic en un ícono, Font Awesome le dará el código que necesita para usar el ícono:

Todo lo que necesita hacer es colocar ese código en la pestaña Texto del Editor de WordPress para agregar un ícono a su sitio.

¡Y eso es! Ha agregado con éxito la compatibilidad con Font Awesome a WordPress. Ahora, todo lo que queda es aprender cómo aplicar estilo a los íconos de Font Awesome en su sitio de WordPress.

Pero antes de mostrarte eso, quiero repasar el método del complemento para agregar Font Awesome Support. Siéntase libre de saltar adelante si optó por el método manual en lugar del método del complemento.

Cómo agregar iconos Font Awesome a WordPress con un complemento

Si prefiere usar un complemento en lugar de poner en cola manualmente la hoja de estilo Font Awesome, hay una opción gratuita sólida en WordPress.org llamada Better Font Awesome.

Además de agregar siempre la hoja de estilo más reciente a su sitio, Better Font Awesome también:

• Le permite usar códigos cortos para incrustar íconos de Font Awesome.
• Le da un menú desplegable en el Editor TinyMCE para insertar iconos.

Si planea usar regularmente los íconos de Font Awesome, estas dos herramientas pueden facilitarle la vida. Pero para un uso poco frecuente, creo que el método manual es la opción más sencilla porque es el más ligero.

Paso 1: Instalar y activar el complemento

Para agregar Font Awesome, todo lo que necesita hacer es instalar y activar el complemento. Realmente no hay nada más.

Si bien hay un panel de configuración básico al que puede acceder yendo a Configuración → Mejor fuente impresionante , puede dejar todo como predeterminado.

Paso 2: Inserte iconos de fuentes impresionantes

Para insertar iconos de Font Awesome con el plugin, tienes dos opciones diferentes:

• Use el código del sitio web de Font Awesome como lo demostré en la sección anterior.
• Use códigos abreviados, que se pueden generar desde un menú desplegable.

Debido a que ya le mostré el primer método en la sección anterior, solo le daré un vistazo rápido al generador de código abreviado desplegable.

Cuando vaya a crear una nueva publicación o página, notará un nuevo botón Insertar icono junto al botón Agregar medios . Si hace clic en él, verá todos los iconos de Font Awesome disponibles, así como una opción para filtrar los resultados:

Todo lo que necesita hacer es hacer clic en el icono elegido y el complemento insertará el código abreviado adecuado:

¡Y eso es todo!

Ahora que tiene soporte para íconos de Font Awesome, profundicemos en algunas formas en las que puede diseñar y manipular sus íconos de Font Awesome.

Cómo aplicar estilo a los iconos de Font Awesome y cambiar los tamaños

Independientemente del método que haya utilizado para agregar Font Awesome a WordPress, utilizará los mismos principios básicos para diseñar sus iconos.

Además, estos comandos funcionan ya sea que esté usando códigos abreviados o el código de inserción del sitio de Font Awesome.

La mayoría de estos consejos se extraen directamente de la página de ejemplos de Font Awesome, por lo que no debe preocuparse por la compatibilidad.

Cambiar el tamaño de los iconos de Font Awesome

Comencemos con uno básico: aumentar el tamaño de los iconos de Font Awesome. De forma predeterminada, los íconos son bastante pequeños, por lo que esta es definitivamente una situación que es probable que encuentre.

Para aumentar el tamaño de un ícono, puede usar cualquiera de estos modificadores:

• fa-lg – aumenta el tamaño en un 33%
• fa-2x – tamaño doble
• fa-3x – triplica el tamaño
• fa-4x – …
• fa-5x – …

Para usar esos modificadores, simplemente agréguelo después del nombre del ícono (pero dentro de las comillas) para el código, y dentro de las comillas de clase para el código abreviado. Aquí hay un ejemplo de cómo triplicar el tamaño de un ícono para ambos métodos de inserción:

• <i class=”fa fa-download fa-3x ” aria-hidden=”true”></i>
• [icono nombre=»descargar» clase=» fa-3x »]

Por ejemplo, esto:

Se convierte en esto en el front-end:

Rotar iconos impresionantes de fuentes

También puede girar fácilmente los iconos de Font Awesome para cambiar su orientación.

Aquí están los modificadores para la rotación. Puede usar cualquiera de estos exactamente igual que los modificadores de tamaño anteriores:

• fa-rotate-90 – gira 90 grados
• fa-rotate-180 – gira 180 grados
• fa-rotate-270 – gira 270 grados
• fa-flip-horizontal: voltea el ícono a lo largo de su eje horizontal
• fa-flip-vertical: voltea el ícono a lo largo de su eje vertical

Añadir animación a los iconos de Font Awesome

También puede agregar algunas animaciones básicas a sus íconos. Font Awesome te ofrece dos modificadores diferentes para agregar rotaciones:

• fa-spin: agrega una rotación suave
• fa-pulse: hace que el ícono gire en 8 pasos diferentes

Estas animaciones se combinan mejor con iconos circulares. Si usa otros íconos con formas extrañas, el efecto puede parecer un poco raro.

Cambiar el color del icono de Font Awesome

Finalmente, te mostraré cómo cambiar el color de los íconos de Font Awesome. Desafortunadamente, no hay modificadores incorporados para esto. En su lugar, deberá usar algún CSS personalizado.

Pero no te preocupes, es muy simple.

Todo lo que necesitas es este pequeño código:

.fa-NAME {
color: COLOR;
}

Donde fa-NAME es el nombre real de su ícono y COLOR es el color al que desea cambiarlo.

Para seguir con el ícono de descarga de nuestros ejemplos anteriores, así es como lo cambiaría a rojo:

Puede agregar fácilmente CSS personalizado yendo a Apariencia → Personalizador → CSS adicional .

Envolviendo las cosas

Los iconos de Font Awesome pueden tardar un par de minutos en configurarse. Pero una vez que los tienes instalados, están ahí para siempre. A partir de ese momento, todo lo que necesita hacer para insertar y diseñar íconos individuales de Font Awesome es seguir los pasos anteriores.

Solo tenga en cuenta: si usa el método manual, querrá ingresar periódicamente y actualizar el enlace a la hoja de estilo para mantenerse al tanto de las últimas versiones.