How to Add Icons to WordPress Menus

In this article we’re going to be covering how to add these cool little icons to our WordPress menus in a matter of seconds. We can use these menu icons that draw attention to specific pages or we can add them to all the different pages in our menu. If we like and including any that are in our drop-down menus.

 

So because WordPress doesn’t come with this feature built in we’re going to be using a free plug-in called menu icons.

 

By theme aisle the reason I suggest using this plug-in is because it comes with a bunch of free icons. And it’s real simple to use on the downside though it doesn’t give us the ability to add our own custom icons, but other than that it’s pretty good at what it does. And it’s got great reviews as well.

So after installing and activating the menu icons plug-in.

We just need to head over to our menu or create a new one.

And for this example, I’m going to be adding icons to the mian menu of my example site. So we can just click on the menu item we’re wanting to add an icon to and then beside where it says I can’t we click select.

That’s going to bring us here and we can either use the search bar in the top right.

Or search by category using this drop down menu on the left

Or we can just scroll through the different icons until we find one we like then. When we do we just need to click on it and we’re going to see these different options on the right hand side along with a preview. So I choose my homepage and as we can see it says home and then I selected the home icon and we can see that here then the different options we have we can hide the label which is going to make it just the icon.

 

Then underneath we can choose whether we want our icon do here before or after the text and I’m personally going to choose before.

Then we can choose the alignment of our icon if we like but I think the defaults fine. And then font size is the size of our icon. So I’m just going to increase the font size to two in this example and as we can see in the preview above it’s not quite a bit bigger.

Then once we’re happy with these options we can click select in the bottom right.

And then move on to the next item in our menu.So I’m just going to add one more in this example and I’m going to add it to my contact page.

So we just click on the menu item beside where it says. I can’t we click select. Then we can find the icon we’re wanting to use click on it change any options we like and then click select.

Then once we’ve added any icons we’re going to add our menu we just need to see if our menu.

And now when we visit our site .We’ll see that our new icons are now alive plus we can see that my home icon is a little bit bigger than the other one.

 

 

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *