Cómo añadir iconos Font Awesome al menú de WordPress

Font Awesome es una compilación de iconos en formato vectorial que se puede personalizar a través de CSS para cambiar el tamaño , el color, añadir sombras , ajustar la opacidad , etc. Estaban originalmente diseñados para Twitter Bootstrap, la fuente esta disponible para el uso en cualquier proyecto.

Estos iconos tienen menos problemas de compatibilidad ya que no utilizan JavaScript. Se ven muy bien en pantallas de “Retina Display” porque al ser vectores se pueden escalar a cualquier pantalla.

Muchas de las plantillas de WordPress incluyen estos iconos y los podemos utilizar sin tener que instalar nada, también se puede instalar un plugin (Font Awesome 4 Menus) si tu plantilla no incluye estos iconos.

Paso 1: Añadimos la clase CSS del icono a nuestro menú.

Elegimos el menú a editar, en el cuadro de “Etiqueta de Navegación” pondríamos algo como <i class=”fa fa-home”></i> o <span class=”fa fa-home”></span> y el texto que queramos.

Menu wordpressLa clase CSS de los iconos la podemos encontrar en Font Awesome Icons. Una vez hemos terminado guardamos y si todo ha salido bien tendemos un menú con iconos.

Un ejemplo del resultado.

menu con iconos

Además de utilizarlos en menús se pueden utilizar en WordPress al crear páginas o entradas pegando el mismo código que hemos utilizando en el menú utilizando la etiqueta <code> seguido de <i class=”fa fa-home”></i> o <span class=”fa fa-home”></span>.

[Total:0    Promedio:0/5]

Kit de herramientas para crear un blog

Lo que uso para crear webs

Mi Kit de Herramientas con el que podrás empezar a crear tu web.

Sergio Kolomiychuk

Autodidacta, apasionado del WordPress, marketing y las nuevas tecnologías. Me encantan las webs limpias con buena usabilidad y es lo que ofrezco a mis clientes. Comparto lo aprendido en el blog para ayudar a otras personas a crear una web profesional.

¿Dónde te mando los accesos al Área Privada?

Cállate y coge mi dinero!!!

fry-coge-mi-dinero
convert-pro
logo-thrive-leads

¿Convert Pro o Thrive Leads?

La decisión es tuya

Convert Pro o

Thrive Leads

Pin It on Pinterest

Share This