Menu Icons

Descripción

Nota para actualizar

Antes de actualizar a la versión 0.9.x, por favor, guarda los ajustes haciendo clic en el botón Guardar de la caja meta Ajustes de Menu Icons. Ve la captura.

Este plugin te ofrece la posibilidad de añadir iconos a los elementos de tu menú, similar al aspecto del nuevo menú de escritorio.

Uso

  1. Una vez actives el plugin ve a Apariencia > Menús para editar tus menús
  2. Activa/Inactiva tipos de iconos en la caja meta “Ajustes de Menu Icons”
  3. Define los ajustes por defecto para el actual menú de navegación; estos ajustes los heredarán los nuevos elementos del menú
  4. Elige el icono haciendo clic en el enlace “Elegir icono”
  5. Guarda el menú

Tipos de iconos incluidos

Compatibilidad futura con tipos de iconos

  • Imagen (URL)

Extensiones

El desarrollo de este plugin se hace en GitHub. Las peticiones son bienvenidas. Por favor, revisa los informes de problemas antes de ir al foro del plugin.

Capturas

  • Editor de menú
  • Selección de icono
  • Twenty Fourteen con Dashicons
  • Twenty Fourteen con Genericons
  • Twenty Thirteen con Dashicons
  • Twenty Thirteen con Genericons
  • Caja meta de ajustes (global)
  • Caja meta de ajustes (menú)

Instalación

  1. Sube menu-icons al directorio /wp-content/plugins/
  2. Activa el plugin en el menú Plugins de WordPress

Preguntas frecuentes

¡No se ven los iconos!

Asegúrate de que tu tema activo esté usando el código correcto para mostrar el menú de navegación. Si está usando un código propio asegúrate de que los títulos de los elementos de menú se puedan filtrar (por favor, consulta al autor de tu tema sobre esto).

Las posiciones de los iconos no se ven bien

Si te sientes seguro editando la hoja de estilos de tu tema puedes sustituir los estilos desde aquí.
Si has instalado Jetpack también puedes usar su módulo CSS personalizado.
En cualquier caso, yo recomiendo usar el plugin Simple Custom CSS.

Algunos iconos de fuente no se muestran correctamente.

Eso un fallo con la icono de fuente. Cuando la fuente está actualizada este plugin también actualiza su fuente.

¿Cómo utilizo el archivo css desde una CDN?

Puedes usar el filtro icon_picker_icon_type_stylesheet_uri , p.ej.:

/**
 * Load Font Awesome's CSS from CDN
 *
 * @param  string                $stylesheet_uri Icon type's stylesheet URI.
 * @param  string                $icon_type_id   Icon type's ID.
 * @param  Icon_Picker_Type_Font $icon_type      Icon type's instance.
 *
 * @return string
 */
function myprefix_font_awesome_css_from_cdn( $stylesheet_uri, $icon_type_id, $icon_type ) {
    if ( 'fa' === $icon_type_id ) {
        $stylesheet_uri = sprintf(
            'https://maxcdn.bootstrapcdn.com/font-awesome/%s/css/font-awesome.min.css',
            $icon_type->version
        );
    }

    return $stylesheet_uri;
}
add_filter( 'icon_picker_icon_type_stylesheet_uri', 'myprefix_font_awesome_css_from_cdn', 10, 3 );
¿Es extensible este plugin?

¡Por supuesto! Aquí tienes como puedes quitar un tipo de icono de tu plugin/theme:

/**
 * Remove one or more icon types
 *
 * Uncomment one or more line to remove icon types
 *
 * @param  array $types Registered icon types.
 * @return array
 */
function my_remove_menu_icons_type( $types ) {
    // Dashicons
    //unset( $types['dashicons'] );

    // Elusive
    //unset( $types['elusive'] );

    // Font Awesome
    //unset( $types['fa'] );

    // Foundation
    //unset( $types['foundation-icons'] );

    // Genericons
    //unset( $types['genericon'] );

    // Image
    //unset( $types['image'] );

    return $types;
}
add_filter( 'menu_icons_types', 'my_remove_menu_icons_type' );

Para añadir un nuevo tipo de icono echa un vistazo a los archivos que hay dentro del directorio includes/library/icon-picker/includes/types de este plugin.

No quiero la caja meta de ajustes ¿Cómo la quito/desactivo?

Añade este bloque de código a tu archivo mu-plugin:

add_filter( 'menu_icons_disable_settings', '__return_true' );
¿Cómo puedo cambiar la clase CSS para ocultar las etiquetas del elemento del menú?

Añade este bloque de código a tu archivo mu-plugin:

/**
 * Override hidden label class
 *
 * @param  string $class Hidden label class.
 * @return string
 */
function my_menu_icons_hidden_label_class( $class ) {
    $class = 'hidden';

    return $class;
}
add_filter( 'menu_icons_hidden_label_class', 'my_menu_icons_hidden_label_class' );
¿Cómo puedo modificar el marcado de los elementos del menú?

Añade este bloque de código a tu archivo mu-plugin:

/**
 * Override menu item markup
 *
 * @param string  $markup  Menu item title markup.
 * @param integer $id      Menu item ID.
 * @param array   $meta    Menu item meta values.
 * @param string  $title   Menu item title.
 *
 * @return string
 */
function my_menu_icons_override_markup( $markup, $id, $meta, $title ) {
    // Do your thing.

    return $markup;
}
add_filter( 'menu_icons_item_title', 'my_menu_icons_override_markup', 10, 4 );
¿Podrías añadir la fuente de icono X?

Avísame en la sección de problemas de GitHub y veré lo que puedo hacer.

¿Cómo puedo desactivar iconos de menú para un menú concreto?

Añade este bloque de código a tu archivo mu-plugin:

/**
 * Disable menu icons for a menu
 *
 * @param array $menu_settings Menu Settings.
 * @param int   $menu_id       Menu ID.
 *
 * @return array
 */
function my_menu_icons_menu_settings( $menu_settings, $menu_id ) {
    if ( 13 === $menu_id ) {
        $menu_settings['disabled'] = true;
    }

    return $menu_settings;
}
add_filter( 'menu_icons_menu_settings', 'my_menu_icons_menu_settings', 10, 2 );
¿Cómo puedo añadir un paquete de iconos de Fontello?
  1. Crea un directorio nuevo llamado fontpacks en wp-content.
  2. Guarda el zip del paquete, extráelo y súbelo al directorio recién creado.
  3. Activa el tipo de icono desde la caja meta de ajustes.

No puedo elegir un tamaño de imagen personalizado desde el desplegable *Tamaño de imagen*

Lee esta entrada del blog.

Reseñas

Need help with the icons

Hello,

i tried to use this plugin when I suddenly realised that the icons in the <i> tags don’t show up, nor the plugin even writes the Dashicon code in the :after tag. Nevertheless it worked on the WordPress standart theme but when i switched to mine they didn’t dissapear, but their height and width were on 0 and i could’nt really change it. Apparently mine doesn’t really support Dashicons (and yea, i also tried out the other icon-opportunities), I also read the common problems in the FAQ and they wrote: ‘Make sure that your active theme is using the default walker’ and i guess I’ve done something wrong with my that, but i can’t figure out what. Maybe it depends on my WordPress Version?

If anyone has an idea, what the issue could be, please feel free to answer 🙂

Plugin might work great but the instructions don’t.

Directions read:

After the plugin is activated, go to Appearance > Menus to edit your menus
Enable/Disable icon types in “Menu Icons Settings” meta box
Set default settings for current nav menu; these settings will be inherited by the newly added menu items
Select icon by clicking on the “Select icon” link
Save the menu

Problem being there is nothing on that page that says “select icon”

So…

Leer todas las 91 reseñas

Colaboradores y desarrolladores

“Menu Icons” es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

“Menu Icons” has been translated into these 2 locales: Russian, Spanish. Gracias a los traductores por sus colaboraciones.

Translate “Menu Icons” into your language.

¿Interesado en el desarrollo?

Revisa el código o suscríbete al historial de desarrollo por RSS.

Registro de cambios

0.10.2

  • Compatibility with WordPress 4.7.0, props Aaron K.

0.10.1

0.10.0

  • Icon Picker 0.4.0
    • Font Awesome 4.6.1
    • Introduce icon_picker_icon_type_stylesheet_uri filter hook.
  • Add aria-hidden="true" attribute to icon element

0.9.3

  • Fix CSS conflicts

0.9.2

  • Update Icon Picker to 0.1.1.

0.9.1

  • Fix support for Composer.

0.9.0

  • Performance optimization.
  • Modularisation. Developers: Take a look at the Icon Picker library.
  • Bug fixes.
  • Removed menu_icons_{type_id}_props filter.

0.8.1

  • Fix disappearing icons from front-end when not logged-in, props jj9617

0.8.0

  • Update Dashicons
  • Update Genericons to 3.4
  • Update Font Awesome to 4.4.0
  • Allow the plugin to be disabled for a certain menu
  • Add new icon type: SVG, props Ethan Clevenger
  • Add new filter: menu_icons_hidden_label_class
  • Add new filter: menu_icons_item_title

0.7.0

  • Update Dashicons
  • Fix annoying browser popup when navigating away from Nav Menus screen
  • Work-around settings update with ajax

0.6.0

  • Update Genericons to 3.2
  • Update Font Awesome to 4.2.0

0.5.1

  • Update Menu Item Custom Fields to play nice with other plugins.
  • Add missing Foundation Icons stylesheet, props John
  • JS & CSS fixes

0.5.0

  • New Icon type: Foundation Icons
  • Add new Dashicons icons
  • Various fixes & enhancements

0.4.0

  • Fontello icon packs support
  • New icon type: Image (attachments)

0.3.2

  • Add missing minified CSS for Elusive font icon, props zazou83

0.3.1

  • Fix fatal error on outdated PHP versions, props dellos

0.3.0

  • Add Settings meta box on Menu screen
  • New feature: Settings inheritance (nav menu > menu items)
  • New feature: Hide menu item labels
  • New Icon type: Elusive Icons
  • Update Font Awesome to 4.1.0

0.2.3

  • Add new group for Dashicons: Media

0.2.1

  • Fix icon selector compatibility with WP 3.9

0.2.0

  • Media frame for icon selection
  • New font icon: Font Awesome

0.1.5

  • Invisible, but important fixes and improvements

0.1.4

  • Fix menu saving

0.1.3

  • Provide icon selection fields on newly added menu items

0.1.2

  • Improve extra stylesheet

0.1.1

  • Improve icon selection UX

0.1.0

  • Initial public release