Cómo añadir iconos de Font Awesome a tus menús y dónde quieras sin plugins

Los iconos tipográficos son un recurso visual estupendo cuando quieres atraer atención a algún elemento de manera sencilla y ligera, sin usar archivos de imagen.

Ya sea en menús, widgets, o incluso en tus contenidos, los iconos sirven para montones de situaciones y usos.

En este tutorial vamos a ver cómo activar y usar iconos de la biblioteca más popular, Font Awesome, en tu sitio WordPress, para que los incorpores donde quieras.

Activa Font Awesome

Para activar los iconos de FontAwesome y así poder usar sus centenares de iconos gratuitos donde quieras lo primero es añadir una función que cargue su biblioteca.

Para ello debes registrarte (gratis) aquí. Recibirás un correo de confirmación y, una vez hagas clic en el enlace que te llegue, ya tendrás tu kit de Font Awesome, imprescindible para la integración. Tu número único lo tendrás en esta página una vez te registres (te recuerdo que es gratis).

Ahora tienes que añadir el siguiente código al final del archivo functions.php de tu tema hijo. Si aún no has creado un tema hijo puedes hacerlo de este modo o de este otro.

/**
 * Font Awesome Kit Setup
 * 
 * This will add your Font Awesome Kit to the front-end, the admin back-end,
 * and the login screen area.
 */
if (! function_exists('fa_custom_setup_kit') ) {
  function fa_custom_setup_kit($kit_url = '') {
    foreach ( [ 'wp_enqueue_scripts', 'admin_enqueue_scripts', 'login_enqueue_scripts' ] as $action ) {
      add_action(
        $action,
        function () use ( $kit_url ) {
          wp_enqueue_script( 'font-awesome-kit', $kit_url, [], null );
        }
      );
    }
  }
}

Y, a continuación del código anterior, añadir una línea más como esta:

fa_custom_setup_kit('https://kit.fontawesome.com/42deadbeef.js');

Pero no guardes aún, pues debes sustituir el código del kit por el tuyo, o sea

42deadbeef

por el de tu kit creado al registrarte (u otro que hayas creado, a elegir). Por ejemplo, si tu kit es

f1234x567

la línea sería así:

fa_custom_setup_kit('https://kit.fontawesome.com/f1234x567.js');

Lógicamente, ahora no te olvides de guardar los cambios en el archivo

functions.php

una vez añadas el código anterior.

Añade iconos a tus menús, widgets, contenidos, etc

Ahora que ya tenemos registrado nuestro kit de Font Awesome solo queda usar sus clases CSS en nuestros contenidos, menús, etc, donde queramos.

Añade iconos a los menús

Añadir iconos a los menús es muy sencillo. Lo primero es asegurarte de que está activa la casilla de clases CSS.

En las siguientes capturas tienes dónde se activa en la administración de menús y en el personalizador…


Ahora, al editar un elemento de menú verás una nueva caja en la que aplicar clases CSS.

Ahora tienes que elegir el icono a añadir a tu menú de la lista de los más de 1.500 que hay…

Una vez seleccionado en la siguiente pantalla te mostrará la clase a introducir:

Haciendo clic en ella se copia automáticamente. Así que, simplemente, introduce eso en la caja de la clase CSS, así…

Y aparecerá tu icono antes de la etiqueta de navegación.

Añade iconos en cualquier parte

Añadir iconos de Font Awesome en cualquier otro contenido, widget o lo que quieras es muy sencillo también. Solo tienes que copiar la clase CSS y pegarla donde quieras que se muestre.

Puedes añadirlos así:

O también de este otro modo:

Simplemente prueba y comprueba cómo queda mejor integrado con el resto de tus contenidos, etc.

Por supuesto, deberás hacerlo en HTML, no en un widget de texto, editor visual o bloque de párrafo normal.

Cambia el tamaño de los iconos

Hasta ahora hemos visto el modo básico de insertar los iconos de Font Awesome pero ¿y si quiero que se muestren a otro tamaño?

Debes saber que, por defecto, los iconos heredarán el tamaño del contenedor en el que los añadas (menú, párrafo, etc).

Pues es muy sencillo, solo tienes que añadir un elemento a tu clase CSS en el que indiques el tamaño a utilizar, así:

fab fa-wordpress-simple fa-2x

O así si es el código completo, para tus entradas, widgets, etc:

Si te fijas, simplemente he añadido al final

fa-2x

, que mostrará el icono al doble del tamaño por defecto del contenedor.

Aquí tienes una tabla con todos los tamaños estándar que puedes aplicar y cómo hacerlo:

Clase Tamaño Notas
fa-xs
.75em
fa-sm
.875em
fa-lg
1.33em También aplica un

vertical-align: -25%
fa-2x
2em
fa-3x
3em
fa-4x
4em
fa-5x
5em
fa-6x
6em
fa-7x
7em
fa-8x
8em
fa-9x
9em
fa-10x
10em

Rotar iconos

Hay más cosas que puedes hacer con los iconos además de cambiar el tamaño, y una muy chula es rotar el icono.

Solo tendrías que añadir un parámetro de rotación siguiendo este patrón:

Clase Cantidad de rotación
fa-rotate-90
90°
fa-rotate-180
180°
fa-rotate-270
270°
fa-flip-horizontal
voltea el icono horizontalmente
fa-flip-vertical
voltea el icono verticalmente
fa-flip-both
voltea el icono en horizontal y vertical (requiere la versión 5.7.0 o superior)

Para que tengas un ejemplo, así rotaría el icono de WordPress 180 grados al doble de su tamaño, para que veas un ejemplo de aplicar los dos estilos que hemos visto:

Animar iconos

Igual de fácil es animar iconos. Las animaciones básicas son el giro y el pulso. Se haría añadiendo un parámetro de animación.

Así haríamos girar el icono de WordPress:

Y así añadiríamos una animación que haga pulsos:

Chulo ¿eh?

Cada vez se pueden hacer más cosas con los iconos de Font Awesome, últimamente incluso añadieron la posibilidad de usar dobles tonos, una virguería.

¿Y esto no se puede hacer con plugins?

Aunque no es el objetivo de este tutorial, sí, claro, pero no todo en realidad, solo las opciones básicas.

Tienes plugins como WP Visual Icons del que ya hablé, Menu Icons, o incluso uno de Font Awesome, con el que insertar fácilmente iconos en menús y otros lugares, pero todo el potencial de los iconos solo lo tendrás siguiente esta guía.

¿Por qué no usar mejor los Dashicons que ya incluye WordPress u otros?

Pues buena pregunta, pero resulta que la biblioteca de Font Awesome es la mayor de todas y la que permite mayores personalizaciones.

De todos modos, como de estos otros ya he hablado, aquí te dejo unos enlaces, por si te los perdiste:

La entrada Cómo añadir iconos de Font Awesome a tus menús y dónde quieras sin plugins la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja un comentario

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