Contributors: codeinwp, themeisle
Tags: menu, nav-menu, icons, navigation
Requires at least: 4.3
Tested up to: 5.4
Stable tag: trunk
License: GPLv2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Spice up your navigation menus with pretty icons, easily.
This plugin gives you the ability to add icons to your menu items, similar to the look of the latest dashboard menu.
https://www.youtube.com/watch?v=YcSotWXIczI
Menu icons works with most of the themes out there, especially with popular ones like Twenty Seventeen or Hestia.
Development of this plugin is done on GitHub. Pull requests welcome. Please see issues reported there before going to the plugin forum.
All the code and sources is publicly available on GitHub/wp-menu-icons for this plugin and for the SDK.
CodeinWP Blog – Designer's Guide To WordPress Revive.Social – Social Media Tools JustFreeThemes - Free WordPress Themes directory
menu-icons to the /wp-content/plugins/ directoryMake 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 Advanced 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 );fontpacks in wp-content.Read this blog post.
icon_picker_icon_type_stylesheet_uri filter hook.aria-hidden="true" attribute to icon elementmenu_icons_{type_id}_props filter.menu_icons_hidden_label_classmenu_icons_item_title