Menu Icons by Themeisle

About this plugin

Questions

The icons are not showing!

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).

The icon positions don’t look right

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.

Some font icons are not rendering correctly

This is a bug with the font icon itself. When the font is updated, this plugin will update its font too.

How do I use css file from CDN?

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 );

Is this plugin extendable?

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.

I don’t want the settings meta box. How do I remove/disable it?

Add this block of code to your mu-plugin file:

add_filter( 'menu_icons_disable_settings', '__return_true' );

How can I change the CSS class for hiding the menu item labels?

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' );

How can I modify the markup the menu items?

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 );