Paso 1: Instalar y activar Font Awesome
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 sección “Apariencia” > “Menús“:
Estás aquí: Blog / Tips y Consejos / Añadir iconos a los menús en WordPress
Añadir iconos a los menús en WordPress
enero 11, 2014 por Benjamin 24 Comentarios
Pasa la voz:
Haz clic para compartir en Twitter (Se abre en una ventana nueva)Haz clic para compartir en Facebook (Se abre en una ventana nueva)Haz clic para compartir en Google+ (Se abre en una ventana nueva)Haz clic para compartir en Reddit (Se abre en una ventana nueva)Haz clic para compartir en Pocket (Se abre en una ventana nueva)Hac clic para enviar por correo electrónico a un amigo (Se abre en una ventana nueva)
Añadir iconos a los menús en WordPress es algo relativamente fácil de hacer, en esta entrada te mostraremos cómo hacerlo a través de un plugin gratuito.
Plugin: Font Awesome
Añadir iconos a los menús en WordPress
Utilizaremos el plugin gratuito “Font Awesome 4 Menus“, originalmente diseñado para Twitter Bootstrap, “Font Awesome” nos proveerá de 369 iconos vectoriales que son completamente personalizables vía CSS (ideal para los usuario más 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 búscalo en la página “Instalar plugins“:
Añadir iconos a los menús en WordPress
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 sección “Apariencia” > “Menús“:
Añadir iconos a los menús en WordPress
En la página “Menús” haz clic sobre la pestaña superior izquierda “Opciones de pantalla“. En el apartado “Mostrar propiedades avanzadas de menú” asegúrate de activar la casilla de verificación “Clases CSS“:
Paso 3: Personalizar el menú de navegación
Estás aquí: Blog / Tips y Consejos / Añadir iconos a los menús en WordPress
Añadir iconos a los menús en WordPress
enero 11, 2014 por Benjamin 24 Comentarios
Pasa la voz:
Haz clic para compartir en Twitter (Se abre en una ventana nueva)Haz clic para compartir en Facebook (Se abre en una ventana nueva)Haz clic para compartir en Google+ (Se abre en una ventana nueva)Haz clic para compartir en Reddit (Se abre en una ventana nueva)Haz clic para compartir en Pocket (Se abre en una ventana nueva)Hac clic para enviar por correo electrónico a un amigo (Se abre en una ventana nueva)
Añadir iconos a los menús en WordPress es algo relativamente fácil de hacer, en esta entrada te mostraremos cómo hacerlo a través de un plugin gratuito.
Plugin: Font Awesome
Añadir iconos a los menús en WordPress
Utilizaremos el plugin gratuito “Font Awesome 4 Menus“, originalmente diseñado para Twitter Bootstrap, “Font Awesome” nos proveerá de 369 iconos vectoriales que son completamente personalizables vía CSS (ideal para los usuario más 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 búscalo en la página “Instalar plugins“:
Añadir iconos a los menús en WordPress
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 sección “Apariencia” > “Menús“:
Añadir iconos a los menús en WordPress
En la página “Menús” haz clic sobre la pestaña superior izquierda “Opciones de pantalla“. En el apartado “Mostrar propiedades avanzadas de menú” asegúrate de activar la casilla de verificación “Clases CSS“:
Estás aquí: Blog / Tips y Consejos / Añadir iconos a los menús en WordPress
Añadir iconos a los menús en WordPress
enero 11, 2014 por Benjamin 24 Comentarios
Pasa la voz:
Haz clic para compartir en Twitter (Se abre en una ventana nueva)Haz clic para compartir en Facebook (Se abre en una ventana nueva)Haz clic para compartir en Google+ (Se abre en una ventana nueva)Haz clic para compartir en Reddit (Se abre en una ventana nueva)Haz clic para compartir en Pocket (Se abre en una ventana nueva)Hac clic para enviar por correo electrónico a un amigo (Se abre en una ventana nueva)
Añadir iconos a los menús en WordPress es algo relativamente fácil de hacer, en esta entrada te mostraremos cómo hacerlo a través de un plugin gratuito.
Plugin: Font Awesome
Añadir iconos a los menús en WordPress
Utilizaremos el plugin gratuito “Font Awesome 4 Menus“, originalmente diseñado para Twitter Bootstrap, “Font Awesome” nos proveerá de 369 iconos vectoriales que son completamente personalizables vía CSS (ideal para los usuario más 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 búscalo en la página “Instalar plugins“:
Añadir iconos a los menús en WordPress
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 sección “Apariencia” > “Menús“:
Añadir iconos a los menús en WordPress
En la página “Menús” haz clic sobre la pestaña superior izquierda “Opciones de pantalla“. En el apartado “Mostrar propiedades avanzadas de menú” asegúrate de activar la casilla de verificación “Clases CSS“:
Añadir iconos a los menús en WordPress
» Paso 3: Personalizar el menú de navegación
Una vez activadas las “Clases CSS“, ve al estructura del menú que es de tu interés, asegúrate que por cada elemento de navegación se muestre el campo “Clases CSS (opcional)“:
Añadir iconos a los menús en WordPress
Para este ejemplo queremos añadir iconos a nuestro “Menú Principal“, el cual está formado por los elementos:
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 pégalo en el campo “Clases CSS (opcional)” de cada elemento del menú en WordPress:
Repite el procedimiento para el resto de los elementos del menú.
Una vez que hayas integrado las clases CSS a los elementos de tu menú, asegúrate de guardar los cambios y de asignar el menú a la ubicación que es de tu interés. La ubicación de los menús que se desplegaran en tu tema puedes controlarla desde la pestaña “Gestionar lugares“:
Al final el resultado lucirá con iconos...un saludo :encouragement:
