Cómo incluir Font Awesome en WordPress

En este tutorial voy a intentar explicar de forma clara y concisa como incluir los iconos tipográficos de la que quizás sea la mejor biblioteca de iconos de todo Internet, es decir incluir Font Awesome en WordPress.

Guía actualizada en 2026. Este tutorial sobre cómo incluir Font Awesome en WordPress Blocks ha sido revisado y optimizado para las versiones actuales de WordPress. Los ejemplos reflejan las mejores prácticas vigentes en 2026.

Métodos para incluir Font Awesome en WordPress

Existen varias formas de incluir Font Awesome en WordPress. Las más habituales son:

  • Utilizar el Kit oficial de Font Awesome (recomendado).
  • Cargar Font Awesome localmente desde tu tema WordPress.
  • Incluir Font Awesome mediante CDN en WordPress.

En esta guía veremos las opciones más utilizadas y sus ventajas e inconvenientes.

Incluiremos la última versión de Font Awesome, es decir, la versión que a fecha de esta entrada es 7.2. y utilizaremos la versión gratuita.

Una vez en la web de Font Awesome nos invita a buscar un icono.

Elijamos por ejemplo el icono menú, al hacer intro nos lleva a esta pantalla.

Al elegir uno cualquiera de los iconos nos presenta en pantalla algo así.

Cómo activar y utilizar Font Awesome

Al hacer clic en ‘Comience a usar este icono’ tenemos que registrarnos en la web (registro gratuito).

Coloca tu correo haces click en el botón de ‘Enviar código de equipo’ y te llegará un correo de confirmación donde evidentemente debes de confirmar.

Una vez que te has dado de alta, se te presenta una serie de pantallas donde eliges un kit.

Después de hacer clik en ‘Próximo’ se ofrecen varias alternativas de uso, eliges la que más se acomode a tus necesidades, y seguimos con ‘Próximo’.

Ya solo nos queda incluir este script dentro del head, una vez hecho podemos ya utilizar los iconos prácticamente en cualquier plantilla de nuestro tema.
Para elegir los icono tendremos que ir al sitio de Font Awesome y elegir los que queramos incluir.

Usar Font Awesome en el administrador de WordPress

También pudiese ser que nos interese tener esta colección de iconos dentro de nuestro administrador de WordPress, para poder utilizarlos en menús, widgets o donde lo necesites.

Tenemos que agregar el siguiente código dentro del fichero ‘functions.php’ de nuestro tema


  /** Añadir Font Awesome **/
  function custom_setup_kit_fontawesome( $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 );
        } );
     }
  }
  custom_setup_kit_fontawesome( 'https://kit.fontawesome.com/dxxxxxxxx.js' );

Continuamos haciendo dos acciones más:
1º .- En opciones de pantalla estando en el administrador en ‘Menús’ tenemos que activar el checkbox ‘Clases CSS’, tal come se ve en la siguiente imagen.
2º .- En el personalizador tenemos también que activar ‘Clases CSS’.

Ahora, estando en cualquier item de cualquier menú, al expandirlo veremos una nueva casilla que es donde colocaremos la clase del icono que nos facilita Font Awesome.

Ya solo nos queda ir a la página de Font Awesome, elegir allí el icono que nos interese y solo debemos de tomar para colocar en la casilla de ‘Clases CSS (opcional)’ la parte que te dejo marcada en la siguiente imagen. Podemos posteriormente según nos interese aplicarles estilos propios a esas clases.

Como ves solo utilizamos el nombre de la clases sin ninguna etiqueta html.

Si vas ahora navegador veras el icono en el item de ‘Contacto’.
Si no lo ves, o bien no has guardado el menú o has hecho algo mal.
¡¡Revisa el procedimiento!!

Instalar Font Awesome localmente en WordPress

Si el primer método para incluir las fuentes de Font Awesome no es de tu agrado por motivos de peticiones del servidor a la página de ‘fontawesome.com’ y prefieres tenerlas incluidas dentro de tu proyecto solo tiene que descargarte la versión comprimida de las fuentes.

Los pasos a seguir serían los siguientes:
Paso #1.- Accede a la web de Font Awesome y descárgate el fichero .zip, tienes el enlace en el párrafo anterior.

Paso #2.- Descomprime el fichero .zip y renombra la carpeta a ‘fontawesome‘ a secas.

Paso #3.- Como no pretendemos hacer nada con los iconos más allá de mostrarlos, puedes eliminar todas las carpetas excepto ‘css‘, ‘webfonts‘ y el archivo de licencia.

Paso #4.- Mueve todo el directorio de ‘fontawesome‘ hasta el directorio de tu tema (en el caso de que tengas una subcarpeta dedicada a los assets o a las fuentes del tema, muévelas allí mejor).

Paso #5.- Abre el archivo ‘functions.php‘ de tu tema y busca si ya existe una función que se encargue de añadir estilos y scripts, para ello busca el texto ‘wp_enqueue_scrpts’, que es el hook de WordPress donde se incluyen estos archivos.

Encontraras una función muy parecida a callback xxx_scripts_styles que en cada tema se llamará de modo distinto.

Paso #6.- Antes de que finalice la función de callback añade el siguiente código que incluirá Font Awesome.


   // Font Awesome
   wp_enqueue_style(
       'fontawesome',
       get_template_directory_uri() . '/fonts/fontawesome/css/all.min.css',
       [],
       filemtime(get_template_directory() . '/fonts/fontawesome/css/all.min.css'),
       true
   );

Paso #7.- Comprueba que todo a ido bien accediendo a la galería de iconos de Font Awesome.

Una vez allí filtra solamente por los gratuitos y haz click en cualquiera de ellos.

Dentro del detalle del icono copia el snippet en html y lo pegas en cualquier parte de tus plantillas.


Comprueba que todo a ido bien, si no es el caso, revisa la ruta donde está alojado el fichero ‘all.min.css’.

Como has visto, existen varias formas de incluir Font Awesome en WordPress. Para la mayoría de proyectos recomiendo utilizar el Kit oficial de Font Awesome por su facilidad de mantenimiento, aunque también es posible cargar los iconos localmente cuando se necesita un control total sobre los archivos utilizados.

Puedes ampliar conocimientos visitando:

Font Awesome oficial
Documentación de instalación de Font Awesome
Guía de iconos Font Awesome
Recursos para desarrolladores de WordPress

También te puede interesar

Salir del blog