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

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 well loved, 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.

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

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í:

Lógicamente, ahora no te olvides de guardar los cambios en el archivo functions.php una vez añadas el código anterior.

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ñ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í:

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

Si te fijas, simplemente he añadido al final fa2x, 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
faxs .75em
fasm .875em
falg 1.33em También aplica un verticalalign: 25%
fa2x 2em
fa3x 3em
fa4x 4em
fa5x 5em
fa6x 6em
fa7x 7em
fa8x 8em
fa9x 9em
fa10x 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
farotate90 90°
farotate180 180°
farotate270 270°
fafliphorizontal voltea el icono horizontalmente
faflipvertical voltea el icono verticalmente
faflipboth 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:

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…

(1 votos, promedio: 5)

¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!


Autor/a: Fernando Tellado
Fuente de información

Publicado en Ayuda Wordpress.

Deja un comentario