Unique icons next to each Wordpress menu item

Question

Unique icons next to each Wordpress menu item

James Mitchell

2022年4月30日 14:05

I have Wordpress menus that is seems are put together in the backend somehow. I used wp_nav_menu() to customize the wrap of the menu items slightly.

My issue is I have found no direct access to access the menu items, and add a custom field to them. They are all categories, and I want a specific icon for each category.

This is my code in the functions.php to customize the menu:

function custom_novice_menu($args) {
    $args['container'] = false;
        $args['container_id'] = 'my_primary_menu';
        $args['link_before'] = 'div class="topic-card"div class="topic-circle"/divh3';
        $args['link_after'] = '/h3/div';
    return $args;
}

Does anyone know a way I could add a unique icon to each menu item?

Topic functions php filters menus Wordpress

Category Web

Vijay Baria · Accepted Answer · 2017年7月10日 06:09

In your theme folder, add this code to your functions file:

function menu_icon_stylesheet() {
    wp_register_style( 'fontawesome', 'http:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
    wp_enqueue_style( 'fontawesome');
}
add_action( 'wp_enqueue_scripts', 'menu_icon_stylesheet' );

Now you can add a class to each of your menu items. Click on the downwards arrow to view more options relating to that menu item. In the ‘CSS Classes’ field, type the following:

Like:

fa fa-lg fa-home

Here

"fa" is used for all items with a Font Awesome icon
"fa-lg" sets the size of the icon to large
"fa-home" relates to the specific icon you want to display.

Finally, add this style code in your stylesheet:

/* styling for menu icons */
.navigation-class ul li {
    width: 100%;
}
.fa::before {
    float: left;
    margin-top: 8px;
    width: 30px;
}
.navigation-class ul li.fa.fa-lg a {
    font-family: 'Noto Serif', serif;
    font-size: 0.8em;
}

Now your navigation menu is complete with icons!

Hope it will help you

InSight · Accepted Answer · 2017年7月10日 06:01

You can probably do this with an icon font, like FontAwesome, plus CSS, in your theme's style.css file (hopefully using a child theme). Each menu item is usually a list item in the HTML, and usually they each have a unique class and/or id, so you can use that to target each one. Add the ::before selector to insert your icon before the list item, something like this:

li.class::before {
    font-family: FontAwesome;
    color: #43CC9E;
    content: "\f06c"; /* escaped unicode for the icon */
    float: left;
    width: 1.6em; /* icon width + space */
}

Here is a CodePen I made, where you can play with the HTML & CSS using FontAwesome to place icons before list items this way.

This article tells you how to get FontAwesome into your WordPress site, and a lot more info about how to use it. There are, of course, other icon fonts, and the principles are the same.

On the FontAwesome.io website you can see each icon and get the unicode for each.

Unique icons next to each Wordpress menu item

About