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.
Índice de contenidos
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í:
<i class="fab fa-wordpress-simple"></i>
O también de este otro modo:
<span class="fab fa-wordpress-simple"></span>
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:
<span class="fab fa-wordpress-simple fa-2x"></span>
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:
<span class="fab fa-wordpress-simple fa-2x fa-rotate-180"></span>
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:
<span class="fab fa-wordpress-simple fa-2x fa-spin"></span>
Y así añadiríamos una animación que haga pulsos:
<span class="fab fa-wordpress-simple fa-2x fa-pulse"></span>
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:
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Excelente Fernando, muy útil. Un abrazo
Me alegro, gracias por comentar
Gracias, Fernando. Me has salvado. No entendía por qué los iconos solo me aparecían en el menú si estaba en la página de inicio y en el resto de páginas me desaparecían. Con el código insertado en la functions.php del tema hijo todo solucionado.
Eso sí, tengo que poner el código delante de la etiqueta de la opción de menú con sus códigos html:
Inicio
Si pongo únicamente la clase en su lugar correspondiente me aparece el icono encima de la etiqueta en vez de en su lado izquierdo. No entiendo la causa, pero al menos lo tengo solucionado así.
Vaya, veo que ha desaparecido el código html que había puesto de ejemplo. Lo que quería decir es que tenía que poner el código completo con su clase para insertar el icono: [i class=»fas fa-home»] [/i] #nbsp; Inicio (he cambiado los marcadores correctos para que no me borre el código. 🙂
Si quieres compartir código aquí hazlo dentro de etiquetas «pre» sino desaparece
Muchas gracias Fernando por tu valiosa aportación. Sólo una pregunta: ¿cómo sería el código que tendría que poner si quisiera un tamaño de icono determinado, por ejemplo 20px y de un color determinado?
Siguiendo tu ejemplo anterior, ¿para hacer un tamaño personalizado sería algo así?
Gracias de antemano
Hola Alejandro,
Pues si no te vale ningún tamaño por defecto yo metería dentro de un div los iconos y les aplicaría el tamaño por CSS, por ejemplo:
Lo mismo para el color