Inicio Informática Font Awesome, inserta esta fuente de iconos en Wordpress

Font Awesome, inserta esta fuente de iconos en Wordpress

Publicado por entreunosyceros

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

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

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>

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.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.