How to Add Image Icons With Navigation Menus in WordPress

How to Add Image Icons With Navigation Menus in WordPress


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

23 thoughts on “How to Add Image Icons With Navigation Menus in WordPress

  1. This tutorial could not have come at a better time. I used your instructions and they worked perfectly. Thank you so much. Your instructions were clear, concise and easy to follow

  2. Will it be possible to share the link from where you got those images (jpg). I would like to download those images and uses it for my site. Appreciate your help.

  3. So where do you go get the images? I tried with my program and I have no images, the home, contact, email icons??? Thanks

  4. I have tried it but I am unable to add any icon. I have tried adding png files but its not showing it in the menu

  5. First I tried the second method and it didn't work – it might be me, and then I tried the first method and it worked! Thank you for the great tutorial.

    I found a free downloadable icon that I liked on the internet.

  6. Awesome, Just what I've been looking for.
    Is there a way to make them side by side instead of stacked on top of each other?
    appreciate the video

Leave a Reply

Your email address will not be published. Required fields are marked *