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]

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.

¡Suscríbete al blog!

No regalo eBooks, pero te ayudo a crear tu web.

Responsable: Serhiy Kolomiychuk (Sergio para los amigos). Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. Legitimación: Tu consentimiento. Destinatarios: Tus datos se guardan en MailChimp. Derechos: Tienes, entre otros, derecho a acceder, rectificar y suprimir tus datos cuando quieras.

Protección de Datos

Responsable:  Serhiy Kolomiychuk ( Sergio para no complicarnos).
Finalidad: gestionar los comentarios que realizas en este blog.
Legitimación: tu consentimiento.
Destinatarios: los datos se guardarán en mi proveedor de hosting FastComet.
Derechos: acceso, rectificación, limitación y suprimir los datos recogidos.
Para más información sobre la política de privacidad haz clic aquí.

Deja un comentario