Insertar Font Awesome en WordPress

[ 28 julio 2016 ] [ Actualizado: 8 mayo 2019 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css librería

Insertar iconos como fuente (tipo de letra) en lugar de hacerlo con imágenes, es una buena práctica cuando construimos un sitio Web. En este artículo veremos cómo insertar y usar una fuente de iconos Font Awesome en WordPress

1- Descarga e Instalación de la fuente

Usaremos Font Awesome como fuente, desde su sitio Web podemos realizar la descarga de la fuente y ver los diferentes iconos que incluye.

Tras la descarga, descomprimimos el archivo, y usaremos las carpetas de css y fonts, copiamos estas carpetas en el theme WordPress que estamos usando. Si ya tenemos la carpeta CSS simplemente copiamos los archivos.

Para realizar la integración con nuestro sitio usaremos el archivo: font-awesome.min.css, usaremos el siguiente código para hacer referencia a este archivo.

add_action( 'wp_enqueue_scripts', 'fonts_style_sheet' );

function fonts_style_sheet(){
	wp_enqueue_style( 'custom-stylesheet', get_stylesheet_directory_uri() . '/css/font-awesome.min.css');
}

Este código lo tenemos que insertar en el archivo functions.php de nuestro theme.

2- Usar iconos con las clases por defecto

Una vez que hemos comprobado que el archivo font-awesome.min.css está cargado en nuestro sitio, lo verificamos revisando el código fuente de la página, entonces podemos usar directamente los iconos como parte del contenido de nuestros artículos o usarlos en un Widget de texto con HTML.

Al entrar en el detalle de cada icono, desde el sitio de Font Awesome, veremos cómo se puede referenciar por HTML. Por ejemplo, para usar el icono de búsqueda usaremos el siguiente código:

<i class="fa fa-search" aria-hidden="true"></i>

3- Usar iconos con nuestras propias clases

Sin embargo, si queremos usar iconos en otras secciones de nuestro sitio, en donde no es posible insertar HTML, entonces usamos CSS. En el siguiente código veremos cómo colocar iconos en los títulos de los Widgets, este código debe ser insertado al final de algún archivo CSS que ya este cargando nuestro theme, por ejemplo el archivo style.css

.widgettitle:before{
 font-family: "FontAwesome";
 content:"\f005";
 margin-right: 10px;
}

En el código anterior :

• La clase widgettitle usa el selector before el cual inserta contenido antes del HTML que tiene esta clase.
• Se asigna el tipo de fuente o tipo de letra con font-family, el tipo de letra usado es Font Awesome
• Luego se agrega el ícono que se desea mostrar, se usa content, el valor asignado “\f005” se encuentra en el archivo font-awesome.css descargado.
• Finalmente se asigna un margen para que exista una separación del título con el ícono insertado.

4- Usar iconos desde PHP

Algunos themes cuentan con snippets, o porciones de código, que permiten realizar modificaciones a ciertas partes del theme, por ejemplo en el caso de los themes genesis, para personalizar el formulario de búsqueda, podemos seguir la documentación del siguiente enlace.

Si tomamos como ejemplo el código de cómo personalizar el texto del placeholder, nuestro código con el icono insertado sería:

//* Customize search form input box text

add_filter( 'genesis_search_text', 'sp_search_text' );

function sp_search_text( $text ) {
 return esc_attr( '' );
}

En el código anterior:

• Se usa el snippet para insertar el texto de placeholder, pero en lugar de un texto será un icono.
• La funcion sp_search_text() retorna una cadena que será el placeholder.
• El valor retornado pasa a través de la función esc_attr().
• El caracter usado será en formato Unicode, se agrega los caracteres &#x delante del valor del content del icono.
• El valor del content del icono lo obtenemos del archivo font-awesome.css descargado.

¿Sigues con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente.

Valora este artículo : (4 votos, promedio: 4,50 de 5)

Cargando...