Saltar al contenido

Font Awesome en WordPress – Cómo añadirlo y usar estos iconos en tu web

2MDsJeW

Los internautas acuden a un sitio web para buscar información o realizar una tarea (registrarse, buscar alojamiento, realizar un pago…).

No vienen a navegar por todo el sitio (con algunas excepciones) y quieren encontrar información rápidamente.

Para facilitar la búsqueda y ayudar al usuario de Internet, existen muchas soluciones: priorizar el contenido (con títulos, párrafos, listas…), añadir una navegación o un buscador entre otros.

De esta manera, el usuario puede encontrar lo que busca de un vistazo en la página.

Si tiene que empezar a leer todo para encontrar lo que está buscando, se aburrirá rápidamente y abandonará el sitio.

Los pictogramas también facilitan y agilizan la búsqueda en un sitio web.

En efecto, al ver este o aquel pictograma en una página web, al navegar rápidamente por la página con los ojos, el internauta sabrá muy rápidamente dónde están las cosas que le pueden interesar.

Estos pictogramas están basados en hábitos. Por convención, usted sabrá que detrás de un pictograma, hay tal o cual cosa.

Si estás en una estación de metro y ves esto:

Automáticamente sabrá que en la dirección del pictograma, se dirige a una salida.

Si volvemos a un sitio web y ves este pictograma:

Usted sabe que al hacer clic en el enlace, encontrará algo para contactar con el autor del blog o con la empresa que está detrás del sitio. Dependiendo de sus hábitos, usted espera encontrar un formulario de contacto o una dirección de correo electrónico.

O si ves esto, por ejemplo:

Usted sabe que podrá buscar en el sitio en esta ubicación.

En este tutorial, veremos cómo añadir pictogramas a tu sitio de WordPress. Para ello, descubriremos la biblioteca Font Awesome.

Font Awesome

Font Awesome es una librería que contiene 7020 pictogramas en la versión pro y 1535 en la versión gratuita.

La ventaja de esta librería es que permite añadir imágenes pequeñas directamente, introduciendo etiquetas HTML con clases específicas. Si, por ejemplo, queremos

Simplemente añada la siguiente etiqueta HTML:'< i class=»fab fa-wordpress»>< /i>’ y los pictogramas de Font Awesome se integrarán perfectamente en su flujo de contenido.

Como aquí estamos interesados en WordPress, veremos cómo integrar esta biblioteca en un sitio de WordPress a través de una extensión y cómo añadir pictogramas en el contenido de su sitio.

Impresionante plugin de fuentes para WordPress

La extensión Font Awesome le permite instalar rápidamente la biblioteca Font Awesome sin líneas de código:

Una vez instalada la extensión, puede activarla.

No hay nada más que hacer, podemos empezar a implementar pictogramas.

Integrar Font Awesome en la barra de navegación

Aquí está nuestro menú:

Queremos añadir pictogramas para facilitar el guiar al usuario a través de los diferentes elementos de nuestro menú (y hacerlo más bonito al mismo tiempo).

Nos dirigimos al sitio de Font Awesome, y podemos acceder a los diferentes pictogramas a través de un motor de búsqueda o directamente en la pestaña «Iconos».

Para el elemento’Inicio’ de nuestra barra de navegación, elegiremos una casa pequeña con referencia a la’página principal’.

Así que podemos insertar’home’ en el buscador Font Awesome.

Estoy interesado en esta casita y es la única disponible con la versión gratuita de Font Awesome.

Hago clic en él y llego a esta página. Actualmente para lo que quiero hacer, voy a utilizar la etiqueta HTML a continuación que contiene la clase correspondiente a nuestro pictograma «home».

Simplemente copie esta etiqueta haciendo clic en ella.

Luego vamos a la parte’Menús’ de nuestra administración de WordPress. Para la gestión del menú, si no estás al día, te dejo descubrir este tutorial:

En su menú, pegue la etiqueta HTML en el título de navegación de su elemento. No olvide dejar un espacio entre la etiqueta y el título. Estás grabando.

Esto da esto:

Si continuamos el trabajo, podemos lograr este resultado

Crear un menú de redes sociales

Para mi menú’social’, selecciono’menú secundario’. Las ubicaciones de los menús dependen del tema que haya seleccionado. Aquí estoy en el escaparate.

En mi menú»social», voy a integrar enlaces personalizados que apuntan a las redes sociales. Aquí pongo Facebook como ejemplo y por supuesto en el título de la navegación, ponemos la etiqueta HTML con la clase correspondiente.

Aquí hay un backend con enlaces a Facebook, Twitter e Instagram

y la parte delantera:

y ahora el encabezado de mi tema Storefront:

Integre Font Awesome en un widget

Para este otro ejemplo, queremos crear un pequeño widget que muestre enlaces sobre el autor del blog.

En la sección’Widgets’ de la administración, añadimos un widget de texto en la barra lateral por ejemplo (todavía estamos con el tema Storefront).

y podemos abrir los parámetros de enlace y especificar un primer elemento como este:

y grabas el enlace. A continuación, vaya a la pestaña’Texto’ del editor de su widget y añada la etiqueta HTML correspondiente al pictograma que desee:

y si repetimos la operación varias veces, obtenemos por ejemplo esto en nuestro editor:

y la parte delantera:

Integrar Font Awesome en el contenido de una publicación

También podemos integrar directamente un pictograma en el contenido de una publicación (tipo página, post o post). En el bloque de párrafos, hacemos clic en las opciones (tres pequeños puntos) así y elegimos’Editar en HTML’

e insertamos la etiqueta HTML del pictograma deseado dentro del párrafo (etiquetas «<p>’).

y en la parte delantera da:

Aquí hemos revisado algunas posibilidades para integrar la librería Font Awesome en WordPress.
Ahora depende de ti personalizar tus sitios de WordPress con pictogramas…..