How to Add Symbols or Icon in WordPress Menu

Do you like to add symbols in your WordPress menu? Lately, one of our users asked for a very easy method to add graphics as symbols in navigation. In this short article, I will certainly reveal you ways to add graphic icons in your WordPress Menu without editing any code.

WordPress have many plugins which really helpful to add more function or customize your website easily. so you can easily add menu icon in your WordPress site using Menu Icon and Font Awesome for Menu. Both plugin will help you to add icon in your website.

Adding Images To Menus Manually with CSS

This approach is for even more experienced customers who recognize their way around CSS. First you need to upload your photos(icon) to WordPress by “Media”. After submitting each graphic, copy their URLs and paste them in a full-screen editor like Note pad.

Now going to Menus and select the Screen Options switch at the top right edge of the screen. On the screen options menu, check the box next to CSS Class.

Menus-icon-WordPress

Following scrolldown to click on any type of item in your present menu, as well as you will see a CSS class field. All you need to do is add a CSS class to your menu gadget.

add-class-menu

Then you should add this CSS in your style or child theme’s stylesheet.

Do not forget to change .yourclass to whatever CSS you entered, as well as change the LINK of the background image from the one you saved previously in a text file.

Depending on your style, you may need to tweak the CSS a bit. As soon as you are satisfied with the result, repeat the procedure for all food selection things.
That’s all for now. I wish this post will help you to ‘How to Add Symbols or Icon in WordPress Menu’ .