Blog

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

30 Comments

  • Noyon Chowdhury on January 6, 2020

    Thanks a lot…
    It was very helpful ❤❤❤

  • Tariq Zia on January 24, 2020

    Great. Thumbs Up

  • Sports Gala on March 12, 2020

    you are my love .. from the last night am trying to do. appreciation for you more more

  • Mehmet BOZKURT on April 5, 2020

    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 🙁

  • Alvin Soo on May 5, 2020

    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?

  • Raji Balan on May 26, 2020

    Thank you. It is useful.

  • IISKINYII on June 9, 2020

    What if I just want the icon by itself? no words next to it

  • Thomas Martin on June 10, 2020

    awesome, but can you tell us how to have the icon appear only on hover? thanks

  • Farrukh Moazzem on June 15, 2020

    nice lesson and lovely voice………………………….

  • Bách Nguyễn Tường on June 16, 2020

    I can't find the "menu image" plugin

  • Fahim Mohammadi on June 20, 2020

    hi can i add icon in footer section?

  • Tilak Raj Sharma on July 1, 2020

    Thanks

  • Neto Next on July 29, 2020

    Thank you very much it worked

  • Madhavs Adventure on August 6, 2020

    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?

  • Tom Palmer on August 9, 2020

    This was just spot on. Thanks so much!

  • kairo x on September 17, 2020

    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?

  • Kern Abellon on September 22, 2020

    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.

  • Radoslav Dimitrov on September 23, 2020

    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 ?

  • Naimul Hasan on October 7, 2020

    thank you

  • Lixcet on November 1, 2020

    Helpfull 😊😊😊

  • sanjeev shrestha on February 27, 2021

    why you are always showing video using plugins?? Using plugins will lead to site to be slow and its not best practise.

  • merjhun on March 2, 2021

    Great tutorial! i want to know how to HIDE MENU LABEL in CSS just showing the icons or image menu only. Thank you.

  • Kim Michael on March 3, 2021

    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.

  • Skyfield Media on March 26, 2021

    This is an excellent presentation with great step by step and the presenter has an awesome voice. Thx

  • Juno Lee on April 7, 2021

    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

  • sky innocent on April 12, 2021

    Can I add a search icon and toggle effect

  • AmDen Technologies on April 30, 2021

    NOTE: This plugin does not work with WordPress 5.7.1

  • Prestige Tv Moments on June 27, 2021

    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?

  • S&S films on July 12, 2021

    the plugin is gone from there …its not there

  • wond0 bills on July 13, 2021

    Thanks I have download but it's not working on peepso …. Don't know why .

WhatsApp us
Live Chat

Office hours operation Mon-Sun 8:00 am ET – 4:00 pm ET

To start your Premium WP or Cpanel service, use our domain search engine, if the domain you want is available, contact us by Whats app to activate your project.

The easiest, fastest, and most secure way to communicate with us.
loading
Please enter your domain.
Please verify that you are not a robot.

Terms Privacy

 

 

WEBFI NETWORK OFFICE HOURS 

Mon-Sun from 8:00 am /4:00 pm USA-ET

WhatsApp us

Small Business – WordPress – CPanel – Hosting

© Webfinet Affordable Private Small Business Solutions All Rights Reserved 2021 - Powered By WEBFINET.com
error: WEBFINET SECURITY IS ON