How To add icons to menu wordpress using simple codes

0
17

How To add icons to menu WordPress using simple codes: 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 icons to menu WordPress using simple CSS codes. So, let’s add some interesting icons to WordPress menu.

Read more: Add Related Posts on BlogSpot Using LinkWithin.
Read more: How To Buy the best Web Hosting With Free Domain For WordPress.

How To add icons to menu wordpress
How To add icons to menu wordpress

How To add icons to menu WordPress:

In order to better explain how to add icons, I will guide you through simple steps. How To add icons to menu WordPress. follow these steps:

Step 1: Download a cool home icon

download any home icon whichever 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.

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

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”

I hope you like this article on “How To add icons to menu WordPress“. Let me any other methods to add icons on WordPress menu and your experience in the comment box. Don’t forget to share this article with your friends and relatives. Keep Visiting…

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.