Spice up your navigation menus with pretty icons, easily.
Contributors: kucrut, joshuairl
Tags: menu, nav-menu, icons, navigation
Requires at least: 4.3
Tested up to: 4.5.2
Stable tag: 0.10.1
License: GPLv2
Donate Link: http://kucrut.org/#coffee
Before updating to 0.9.x, please save the settings by clicking on the Save button on the Menu Icons Settings meta box. See screenshot.
This plugin gives you the ability to add icons to your menu items, similar to the look of the latest dashboard menu.
- 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
- Dashicons (WordPress core icons)
- Elusive Icons by Aristeides Stathopoulos
- Font Awesome by Dave Gandy
- Foundation Icons by Zurb
- Genericons by Automattic
- Fontello icon packs
- Image (attachments)
- SVG (attachments)
- Image (URL)
Development of this plugin is done on GitHub. Pull requests welcome. Please see issues reported there before going to the plugin forum.
- Upload
menu-iconsto the/wp-content/plugins/directory - Activate the plugin through the Plugins menu in WordPress
Make sure that your active theme is using the default walker for displaying the nav menu. If it's using its own custom walker, make sure that the menu item titles are filterable (please consult your theme author about this).
If you're comfortable with editing your theme stylesheet, then you can override the styles from there. If you have Jetpack installed, you can also use its Custom CSS module. Otherwise, I recommend you to use the Simple Custom CSS plugin.
This is a bug with the font icon itself. When the font is updated, this plugin will update its font too.
You can use the icon_picker_icon_type_stylesheet_uri filter, eg:
/**
* 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 );Certainly! Here's how you can remove an icon type from your 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' );To add a new icon type, take a look at the files inside the includes/library/icon-picker/includes/types directory of this plugin.
Add this block of code to your mu-plugin file:
add_filter( 'menu_icons_disable_settings', '__return_true' );Add this block of code to your mu-plugin file:
/**
* 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' );Add this block of code to your mu-plugin file:
/**
* 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 );Let me know via GitHub issues and I'll see what I can do.
Add this block of code to your mu-plugin file:
/**
* 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 );- Create a new directory called
fontpacksinwp-content. - Grab the zip of the pack, extract, and upload it to the newly created directory.
- Enable the icon type from the Settings meta box.
https://www.youtube.com/watch?v=B-5AVwgPaiw
Read this blog post.
- Support RTL, props ybspost.
- Icon Picker 0.4.0
- Font Awesome 4.6.1
- Introduce
icon_picker_icon_type_stylesheet_urifilter hook.
- Add
aria-hidden="true"attribute to icon element
- Fix CSS conflicts
- Update Icon Picker to 0.1.1.
- Fix support for Composer.
- Performance optimization.
- Modularisation. Developers: Take a look at the Icon Picker library.
- Bug fixes.
- Removed
menu_icons_{type_id}_propsfilter.
- Fix disappearing icons from front-end when not logged-in, props jj9617
- 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
- Update Dashicons
- Fix annoying browser popup when navigating away from Nav Menus screen
- Work-around settings update with ajax
- Update Menu Item Custom Fields to play nice with other plugins.
- Add missing Foundation Icons stylesheet, props John
- JS & CSS fixes
- New Icon type: Foundation Icons
- Add new Dashicons icons
- Various fixes & enhancements
- Fontello icon packs support
- New icon type: Image (attachments)
- Add missing minified CSS for Elusive font icon, props zazou83
- Fix fatal error on outdated PHP versions, props dellos
- 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
- Add new group for Dashicons: Media
- Fix icon selector compatibility with WP 3.9
- Media frame for icon selection
- New font icon: Font Awesome
- Invisible, but important fixes and improvements
- Fix menu saving
- Provide icon selection fields on newly added menu items
- Improve extra stylesheet
- Improve icon selection UX
- Initial public release