How To Add wordpress menu icons using simple codes step by step


Do you want to make your wordpress menu more attractive? I will guide you how to add wordpress menu icons like me. You can easily add icons to wordpress menu using css editor. icons on wordpress menu make pro impression on visitors. let’s learn How to add wordpress menu icons in wordpress using simple css codes.

Read more:.

wordpress menu icons

Steps to Adding A Home wordPress menu icons to WordPress Menu:

In order to better explain how to add icons I will guide you in simple steps.follow these steps:

Step 1: Download a cool home icon

download any home icon which ever you want. upload it to your media.copy media file links. Just google it.

Step 2: Enable Classes In Your WordPress Menu

By default the WordPress menu doesn’t show the “class” attributes in the menu builder, so hit the “screen options” and make sure it is checked.

WordPress Menu Classes

Step 3: Add Style To Homepage Link

Now you can browse to or create a homepage link and add a new class to it. I added a class called “home-link-icon”.

WordPress Home Link Class

Step 4: Add CSS For Home Menu Icon

Now the only thing left is adding the css to your stylesheet to show the icon for the class you just created. Note: Make sure you add the icon downloaded in step 1 into your theme’s images folder.

Sample CSS

.home-link-icon a{
   padding-left: 30px !important;
   background-image: url(your icon link);
   background-position: left;
   background-size: 35px;
   background-repeat: no-repeat; }

note : enter your image links in ” your icon link”

Hope you like this article on “steps to add wordpress menu icons”. Let me any other methods to add icons on wordpress menu and your experience in comment box. Don’t forget to share this article with your friends and relatives. Keep Visiting…


Please enter your comment!
Please enter your name here