Font Awesome, inserta esta fuente de iconos en WordPress

top feature image

Font Awesome, inserta esta fuente de iconos en WordPress

Valora este artículo:
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 4,00 de 5)
Cargando…

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

Página web para descargar font awesome

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.

carpetas a utilizar de font awesome

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).

código para functions.php

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:

font awesome insertado en wordpress

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.







Resumen
Font Awesome, inserta esta fuente de iconos en Wordpress
Nombre
Font Awesome, inserta esta fuente de iconos en Wordpress
Descripción
Una forma sencilla de poder disponer de estas fuentes de iconos en Wordpress.
Autor
Nombre del editor
entreunosyceros
Logo del editor

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.