Aadir iconos a los mens en WordPress

enero 11, 2014 por Benjamin Amaya 12 Comentarios

Ests aqu: Inicio / Tips y Consejos / Aadir iconos a los mens en WordPress

Twitter
Facebook
Google
LinkedIn
Pinterest
StumbleUpon

Aadir iconos a los mens en WordPress es algo relativamente fcil de hacer, en esta
entrada te mostraremos cmo hacerlo a travs de un plugin gratuito.

Plugin: Font Awesome

Utilizaremos el plugin gratuito Font Awesome 4 Menus, originalmente diseado para

Twitter Bootstrap, Font Awesome nos proveer de 369 iconos vectoriales que son
completamente personalizables va CSS (ideal para los usuario ms experimentados), los
iconos no utilizan JavaScript y son perfectos para pantallas retina.

Paso 1: Instalar y activar Font Awesome

Descarga el plugin Font Awesome 4 Menus desde el repositorio oficial de plugins, o

bscalo en la pgina Instalar plugins:
Una vez instalado y activado, Font Awesome 4 Menus es completamente funcional en tu
sitio web y no requiere configuraciones adicionales.

Paso 2: Activar clases CSS

Ahora es momento de activar un ajuste de las propiedades avanzadas de men. Desde el

men lateral izquierdo ve a la seccin Apariencia > Mens:
En la pgina Mens haz clic sobre la pestaa superior izquierda Opciones de pantalla.
En el apartado Mostrar propiedades avanzadas de men asegrate de activar la casilla
de verificacin Clases CSS:

Paso 3: Personalizar el men de navegacin

Una vez activadas las Clases CSS, ve al estructura del men que es de tu inters,
asegrate que por cada elemento de navegacin se muestre el campo Clases CSS
(opcional):
Para este ejemplo queremos aadir iconos a nuestro Men Principal, el cual est
formado por los elementos:

Inicio
Nosotros

Tienda
Contacto

Blog
Mi cuenta

Visita el Cheatsheet oficial de Font Awesome para visualizar los iconos disponibles,
as como las clases CSS de cada icono en particular:

Observa que cada clase inicia con el prefijo fa-. Copia ese prefijo y pgalo en el campo
Clases CSS (opcional) de cada elemento del men en WordPress:
Repite el procedimiento para el resto de los elementos del men. En este ejemplo
utilizaremos:

Elementos del men de navegacin:

Inicio
Nosotros
Tienda
Contacto
Blog
Mi cuenta

Clases CSS a utilizar:

fa-home
fa-users
fa-shopping-cart
fa-envelope-o
fa-files-o
fa-key

Una vez que hayas integrado las clases CSS a los elementos de tu men, asegrate de
guardar los cambios y de asignar el men a la ubicacin que es de tu inters. La ubicacin
de los mens que se desplegaran en tu tema puedes controlarla desde la pestaa Gestionar
lugares:

Al final el resultado lucir similar a:

 Descargar plugin: Font Awesome 4 Menus

Comentarios finales
Font Awesome 4 Menus es un plugin ligero y con muy pocos problemas de
compatibilidad gracias a que no requiere de JavaScript, ahora que conoces este interesante
plugin no dudes en aadir iconos a los mens en WordPress, inclusive puedes utilizar
iconos en entradas o pginas utilizando un shortcode similar a:

[fa class="fa-home"]
12
3 //* Cambia la clase CSS "fa-home" a placer:
http://link.mvkoen.com/1aR7Z5t
view raw shortcode.html hosted with by GitHub

Twitter
Facebook
Google
LinkedIn
Pinterest
StumbleUpon

Otras publicaciones que pueden ser de tu inters:

Aadir una imagen destacada en WordPress a travs de pluginEn "Plugins para WordPress"
5 plugins para mostrar imgenes de Flickr en WordPressEn "Plugins para WordPress"

4 plugins de video para WordPressEn "Plugins para WordPress"

Archivado en: Tips y Consejos Etiquetado con: Font Awesome, Font Awesome 4 Menus,
Iconos, Men, snippet

Expertos en WordPress Nos convertimos en tu socio digital

Servicios que te ofrecemos:

Servicios de Diseo Web en WordPress con los frameworks ms poderosos del

mercado!

Instalacin y configuracin de los plugins ms populares disponibles para

WordPress!

Otros servicios de WordPress para llevar tu sitio web a un nivel superior!

Ms Informacin Aqu

Acerca del Autor Benjamin Amaya

Benjamin Amaya ... I'm a WordPress Expert & Web Developer - Sales Consultant
Extraordinaire | Comparte esta publicacin y no olvides suscribirte al newsletter de
WordPress!

Comentarios

1. pau escribi

enero 24, 2014 a las 4:39 am

Y si quieres cambiar el tamao de la fuente en un nico item?

Responder

o Estella Vidal escribi

enero 24, 2014 a las 6:05 pm

Hola @Pau, va CSS puedes cambiar el tamao del icono asignando una
clase adicional al campo Clases CSS (opcional). O tambin puedes incluir
el ID del item en cuestin, su clase individual ms la clase fa, ejemplo:

/***Cambia el tamao del icono carrito de compras***/

#menu-item-411 .fa-shopping-cart.fa {
123 4 font-size: 25px
}

view raw style.css hosted with by GitHub

Saludos

Responder

Marco A. Garca escribi

enero 29, 2014 a las 4:25 pm

Excelente! duda, si coloco una clase en el campo Clases CSS

(opcional) por ejemplo , icono, solo tengo que colocar en mi hoja
de estilos la clase asi:
.icono { }

o necesito hacer otra cosa? lo he intentado y no lo logro.

Gracias de antemano.

Responder

Estella Vidal escribi

 enero 30, 2014 a las 9:23 am

Es correcto @Marco, puedes utilizar las herramientas de

desarrollador de tu navegador para identificar los elementos
del men en el tema.

Si utilizas Chrome este tutorial puede ser de tu inters:

Introduccin a las herramientas para desarrolladores de
Chrome)

Responder

Marco A. Garca escribi

febrero 6, 2014 a las 6:51 pm

Gracias Estella me sirvi mucho!! Saludos.

2. Marco A. Garca escribi

enero 29, 2014 a las 4:21 pm

Hola!

Me parece excelente este plugin y mas la forma en que explicas como usarlo, a mi
me viene como anillo al dedo ya que no conozco mucho de programacin y me
estoy metiendo a este mundillo as que mientras aprendo a hacerlo de forma manual
me viene muy bien el plugin!

Responder

o Estella Vidal escribi

mayo 13, 2014 a las 1:31 pm

Un placer @Marco, xito en tu proyecto !

Responder
3. Guillermo Fernndez A. escribi

mayo 12, 2014 a las 6:23 pm

Gracias a Benjamin por haber mostrado este plugin excelente para los iconos de
menus.
Tambien gracias a Estella que con sus conocimientos nos enseo como poder
modificar el tamao del icono porque el tamao que da por defecto es muy
pequeo.
Dando un excelente resultado en todo lo que aqui se muestra.
Saludos!!!

Responder

o Estella Vidal escribi

mayo 13, 2014 a las 1:32 pm

Un placer @Guillermo, gracias a ti por visitar nuestro blog!

Saludos

Responder

4. Luis Vega escribi

junio 8, 2014 a las 2:55 am

Excelente informacion, solo me gustaria saber si hay forma de ponerles un color

como dorado, y si se pueden agregar otros iconos

Responder

o Estella Vidal escribi

junio 10, 2014 a las 8:23 pm

Hola Luis,
 Por supuesto! utiliza tu hoja de estilos para aadir el color de tu eleccin ,
font awesome no ofrece soporte para el uso de iconos personalizados.

Un saludo!

Responder

5. Alejandro Novs escribi

junio 18, 2014 a las 12:19 pm

Hola! Primero decir que un genial post, segundo una consulta.

Puedo aadir iconos vectorizados que tenga yo creados por mi mismo a un

framework como este y asi tenerlos todos juntos?

Saludos y gracias

Responder

Deja un comentario

Tu direccin de correo electrnico no ser publicada. Los campos necesarios estn

marcados *

Nombre *

Correo electrnico *

Web

Comentario

Notifcame cuando nuevos comentarios sean publicados.

Sguenos!


ltimas Publicaciones

Probamos Leadin el plugin de rastreo de clientes

potenciales para WordPress
septiembre 3, 2014 por Marco Pakoeningrat

Lanzamientos de Plugins para WordPress: 01/09

septiembre 1, 2014 por Luis Felipe Salas

WordCamp Rio de Janeiro 2014

agosto 31, 2014 por Estella Vidal

Jose Antonio Maroto Fernandez: Tu WordPress 100%

legal
agosto 31, 2014 por Estella Vidal

Publicidad
Creamos tu sitio web con
Genesis Framework
el framework ms poderoso y seguro para WordPress
Comienza Aqu

Categoras del Blog

Eventos (26)
Lanzamientos de Plugins (96)
Newsletter de WordPress (5)
Noticias Relacionadas con WordPress (10)
Plugins para WordPress (89)
Preguntas Frecuentes (106)
Productividad (21)
Temas para WordPress (24)
Tips y Consejos (97)
Videos y Conferencias (19)
WordPress en general (56)
Por qu utilizar WordPress? (9)

Nuestros Recursos Favoritos

A continuacin una lista de los plugins y servicios que utilizamos y/o recomendamos para
ti y tu sitio web con WordPress:

Gravity Forms (plugin)

Migrate DB Pro (plugin)
s2member Pro (plugin)
Toolset Plugins (plugins)
MotoPress (plugin)
WPMU DEV (plugins)

Synthesis (hosting)
WP Engine (hosting)
HostGator (hosting)
NameCheap (dominio)
 Team Treehouse (educacin)

Prximos Eventos

WordCamp Rio de Janeiro 2014

Por Estella Vidal

WordCamp Los Angeles 2014

Por Estella Vidal

Publicidad
Etiquetas Populares

Actualizaciones de WordPress Advanced Access Manager Asana BuddyPress categoras CDN Comentarios
Consejos Dropbox Entradas esquema de color de administracin Fast Secure Contact Form Genesis 2.0 Genesis
Framework Gestin de Tareas Google+ Gravity Forms Hosting Imgenes Inicio de sesin iOS Jetpack
Nuevos Plugins paga con un "me gusta" PayPal Pinterest
Matt Mullenweg Plugin

Plugins Actualizados Por qu WordPress Productos SEO Productividad

snippet StudioPress Temas HTML5 Twitter Usuarios WooCommerce

WordCamp WordPress.com WordPress 3.5 WordPress 3.6 WordPress 3.8 WordPress SEO by
Yoast
Publicidad