WEBFI-WordPress-How to Add Image Icons With Navigation Menus in WordPress
Do you want to add image icons to your WordPress navigation menu? This can help with the design and style of your menus for your users to understand them better. In this video, we will show you how to add image icons with your WordPress navigation menus.
–Links–
►Written Tutorial – How to Add Image Icons With Navigation Menus in WordPress
https://www.wpbeginner.com/plugins/how-to-add-image-icons-with-navigation-menus-in-wordpress/
►MonsterInsights https://www.monsterinsights.com/ Promo Code WPBVIP
–Top Resources–
Use Promo Code WPBVIP
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin https://aioseo.com/
►Best Landing Page Builder for WordPress https://www.seedprod.com/
►Best WordPress Giveaway Plugin https://rafflepress.com/
–Related Videos–
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
The code we use for the second method can be found here:
https://www.wpbeginner.com/plugins/how-to-add-image-icons-with-navigation-menus-in-wordpress/
For the first method, we will be showing you we will be using the plugin “Menu Image” found here:
https://wordpress.org/plugins/menu-image/
With the plugin installed and activated, you can go under Appearance, Menus and edit or create a menu for your site. Under each menu item, you will now have the option to set a menu image and an image on hover. You also have the option to decide where the image appears and the size of the image.
The second option will be manually adding the CSS to add the images to your menu icons.
Start by using the screen options in your menu editor to display the CSS Classes. In the CSS Classes, you will want to add unique identifiers to each of your menu items for the code to choose from. With that set up with your images, you would add the CSS code from our article and change the name to the menu icon you want it to be.
If you liked this video, then please Like and consider subscribing to our channel here for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Check us out on Facebook
https://www.facebook.com/wpbeginner
Follow us on Twitter
http://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
http://www.wpbeginner.com
#WordPress #WordPressTutorial #WPBeginner
source
As usual amazing tutorial video. Thank you
So where do you go get the images? I tried with my program and I have no images, the home, contact, email icons??? Thanks
Exactly what am looking for, keep it up
Can u upload that images please? ( home icon, contact, about, etc) i can't find it at google
This applies to Sprites CSS?
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
i am not getting image icons
thank u is helpful
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.
Anyone know how to do this without plugin?? I've tried css but can't get it to work
Awesome tutorial. However, what if I want to change the main "hamburger menu icon". How will that be done?
thank you!! it helped 🙂 <3
This plugin doesn’t seem to exist anymore..
cannot find this plugin
Clear instruction. Awesome tutorial, keep it up
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
I have a question is it possible to add facial recognition to WordPress, like for security purposes, also another question to add to this is it possible to add instead of a password maybe something like a pattern password like Android phone, I'm also wondering about a ranking system and credit system, based on users behavior and activities
Like a diet, workout tracking, or helping someone, a type of rewards score for doing good deeds and or rewards score for doing hygiene and etc, including location sharing etc, I'm trying to build a site that pushes my students to be better
Thanks a lot…
It was very helpful ❤❤❤
Great. Thumbs Up
you are my love .. from the last night am trying to do. appreciation for you more more
OMG wordpress allready have Css Classes for menus? i been trying add css classes to menus for 2 hours 🙁 Thank you so much <3 i think iam a moron 🙁
Hi, thanks for your videos really great! at 3:44 how do you create the mobile hamburger menu icon with the text "menu" beside it?
Thank you. It is useful.
What if I just want the icon by itself? no words next to it
awesome, but can you tell us how to have the icon appear only on hover? thanks
nice lesson and lovely voice………………………….
I can't find the "menu image" plugin
hi can i add icon in footer section?
Thanks
Thank you very much it worked
Thank you for the tutorial. I tried this plugin in oceanwp theme with "Title position" hide. This worked like a charm in desktop mode. But in mobile, the title is not hiding. Is there any way to do this?
This was just spot on. Thanks so much!
this plugin doesnt work for me. Insert image button doesnt appear. I tried to disable all plugins but it didnt help. What may be a reason of it?
Hey! is there a way I can contact you like in the chat. Just have some questions regarding my website icons not appearing and css is not showing.
Hello,
First of all thanks for the tutorial !
Can you help me a little?
I cant use the plugin because of another one already instaled, so i try the second method with css, but my icons not keeping the clickable vision as the parent menu items.
Any ideas ?
thank you
Helpfull 😊😊😊
why you are always showing video using plugins?? Using plugins will lead to site to be slow and its not best practise.
Great tutorial! i want to know how to HIDE MENU LABEL in CSS just showing the icons or image menu only. Thank you.
I have the Astride Theme for WordPress. I downloaded plug in for MENU IMAGE. There is no set image option. How do I add an ICON IMAGE? Thanks.
This is an excellent presentation with great step by step and the presenter has an awesome voice. Thx
thank you so much for the video 🙂 is there anyway to do it with the basic wordpress package? cause it always says i need to upgrade to business if i want to use plugins or work with css
Can I add a search icon and toggle effect
NOTE: This plugin does not work with WordPress 5.7.1
I've observed a website where it seems that they use the icon list widget but on hover it drops down a menu. Is this possible to do in elementor pro or does it require a plugin?
the plugin is gone from there …its not there
Thanks I have download but it's not working on peepso …. Don't know why .