Vamos a ver como integrar Font Awesome en WordPress, mediante código y mediante un plugin.
Tabla de contenidos
Características de Font Awesome
- Los iconos son imágenes vectoriales, con lo que podemos escalarlas al tamaño deseado sin perder calidad.
- Los iconos se tratan como una fuente, lo cual es muy interesante de cara al diseño responsive.
- Podemos personalizarlo totalmente a través de la CSS (tamaño, color, animación …)
- El proyecto es Open Source y es compatible con licencia GPL, con lo que podemos usarlo en cualquier tipo de proyecto.
Integrar Font Awesome mediante código
Font Awesome nos ofrece mediante CDN un script para linkar su librería. Desde hace un tiempo tenemos que proporcionar un email para que nos manden ese script al correo. Os dejo aquí el script:
<script src="https://kit.fontawesome.com/d949a75390.js"></script>
Esta línea tiene que ir entre las etiquetas <head> del fichero header.php de nuestro theme WordPress. Editar este fichero es un problema porque cuando se actualice el theme esta línea desaparecerá. Si querríamos evitar este problema al actualizar el theme tendríamos que hacer un Child Theme.
Integrar Font Awesome mediante un plugin
He probado varios plugins y me quedo con el Font Awesome Integration desarrollado por Manny Costales. Su uso es muy sencillo, simplemente hay que instalar el plugin y activarlo. Después ya podemos usar los códigos HTML de Font Awesome
<i class="fas fa-ambulance fa-3x"></i>
También podemos usar un Shortcode cona la palabra fawesome con el atributo iclass
[fawesome iclass="fa-cog fa-3x fa-spin"]
Personalización de los iconos
Primero os dejo el link a todos los iconos que nos ofrece Font Awesome
Para incrementar el tamaño de los iconos en relación a su contenedor, usaremos el valor fa-2x, fa-3x, fa-4x, fa-5x, …
Para modificar el color y también su tamaño con font-size podemos hacer a través de CSS accediendo por su clase
.fa-ambulance{
color: blue;
}