How to Add Image Icons With Navigation Menus in WordPress wp lifetime webs
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
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 .