Integrar Font awesome en Wordpress

Vamos a ver como integrar Font Awesome en Wordpress, mediante código y mediante un plugin.

 

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:

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

También podemos usar un Shortcode cona la palabra fawesome con el atributo iclass

 

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

 

 

 

Deja un comentario

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