Una vez más aquí. En esta ocasión vengo a dejar un pequeño artículo por un pequeño problema que me ha surgido a la hora de montar una web para unos clientes. El caso es que en esta web los clientes quieren utilizar las fuentes de iconos que proporcionan Font Awesome. Pero se encontraron con un problema y es que el icono de Whatsapp que querían añadir a la web no se mostraba.
Como le dije, estos iconos son un puntazo para montar webs, pero insertar iconos como fuente (tipo de letra) en lugar de hacerlo con imágenes, es una buena práctica cuando construimos un sitio. En este artículo veremos cómo insertar y usar una fuente de iconos Font Awesome en WordPress.
Descargar e instalar la fuente
Como digo, para utilizar estas fuentes vamos a utilizar Font Awesome, las cuales podemos descargar desde su sitio Web, para poder utilizar los diferentes iconos que incluye el paquete descargado.
Tras la descarga tendremos que descomprimir el archivo. Dentro encontraremos un listado de carpetas como se ve en la anterior captura. De todas las carpetas vamos a utilizar las carpetas de css y webfonts. Lo siguiente que haremos será copiar estas carpetas en el theme WordPress que estamos usando. Si ya tenemos la carpeta CSS simplemente copiamos los archivos a esta carpeta.
Para realizar la integración con nuestro sitio, vamos a utilizar el archivo: font-awesome.min.css, usaremos el siguiente código para hacer referencia a este archivo. El código lo tenemos que insertar en el archivo functions.php de nuestro theme, o también podemos añadirlo al plugin de funciones (si es que utilizamos uno de estos).
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');
}
Usar iconos con las clases por defecto
Una vez que hemos comprobado que el archivo font-awesome.min.css está cargado en nuestro sitio (esto vamos a poder verificarlo 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 whatsapp no hay más que añadir la case correspondiente en el código html, como se puede ver a continuación:
<i class="fa fa-whatssapp" aria-hidden="true"></i>
Y con estos sencillos pasos, ya se han podido añadir los iconos que esta gente buscaba a su página web. Aun que el color, a mi modo de ver deja mucho que desear, pero eso ya es otra cosa.