Do you want an easy way to add menu icons to your menu area? Well keep watching.
In this video I'll show you how you can add menu icons in WordPress
I'll show you two methods and the first one is the easiest of the two. With the first method
we'll be installing a plugin that will allow us to do all of this easily.
So let's head over to our WordPress dashboard. We'll go down to plugins area,
add new, and we want to search for Menu Image. this is the one we want so let's
go ahead and click install now and once it's installed you'll also want to make
sure that you click activate as well. Once it's activated we can head over to
our menu area. So let's go to Appearance, Menus. You see with my home area I can
extend, I can expand that and here I have a button that I can click to set the
image. You can either choose the image that you have already or you can upload
files of the icons that you already have. So you want to go through this and do it
for each one. Also for the image size you want to make sure that you select it for
the appropriate size. I have set these for 24 by 24 so you'll want to adjust
that as well. Down here you can choose to hide the title of the menu item for the
page or you can decide to put it above, below, before, or after. I'm going to keep
it at after and then you just want to go through and do the same thing for all of
them. Great, when you're finished adding all of the icons you'll want to make
sure that you click Save menu and now we'll go to our website and we'll see
what it looks like in action. Now we have great looking icons set up for our menu
page. So that's method one for method two if you're more comfortable with using
CSS then I'll show you how to do that. So let's head back over to our
WordPress dashboard. I'm going to go ahead and remove that plugin. So I've
removed the plugin because we're going to use some CSS instead.
So for this let's head back over to our appearance area, menus. Again we'll be
using the main menu for this so click on it and you'll see that that button and
the icons are gone because I removed the plugin but that's alright. What we want
to do is we want to go up to see screen options and from here we want to make
sure that we select the CSS classes because we'll be using that for these.
So we can close that out. I have that button selected and now we have CSS
classes which is optional in our area. What I want to do here is create new CSS
classes and type them here and then I'll show you how we can add that in our CSS
and you'll want a separate one for each. You want to make sure that you click
Save menu. Great now that we've added the CSS classes we'll also need to add some
bit of code to our CSS style sheet. You can grab the CSS code from the link
below. The easiest way that you can do is head over to the customize area that's
just above menu. We'll click customize and your theme will look a little bit
different with this but you'll want to scroll all the way down and you'll see
this little additional CSS here. You probably don't have any information here
but just scroll all the way down and hit a new line and we'll want to paste this
bit of code. So basically we're doing Home icon and here's the background
image where it's at you'll want to grab this information. I'll show you how to do
that and you want to make sure it says no-repeat and all of that. You can do the
same thing for all of them changing the CSS name from all of them from the ones
that we gave in the menu. I want to get the location of all the images so I'm
going to open up a new tab I don't want to close that other one out. So open up a
new tab, go to my dashboard, head down to media. I'm going to use all the icons
that I just used I've already uploaded these. To get the
location you want to click on it and then over here you see the URL we just
want to select the whole thing and click copy. This one is my about so
when I go back to the CSS area find the about icon and I want to change
this out so I'm going to paste that in there. So let's just do it for all of the
others. Great, and now with all of those in there
you see them showing up here so we can make sure that we click publish
and now we can click on our blog and see it in action as well. So those are two great
methods to add menu icons in your WordPress website. Did you learn
something from today's video? If so subscribe to our YouTube channel and
we'll send more helpful tips to help you manage your WordPress website and thanks
for watching