Blog

WEBFI-WordPress-How to Add Image Icons With Navigation Menus in WordPress



WordPress menus do not normally have icons in the navigation area. There is a plugin that will allow you to be able to do this. In this video, we will show you how to add image icons with navigation menus in WordPress.

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Text version of this tutorial:
http://www.wpbeginner.com/plugins/how-to-add-image-icons-with-navigation-menus-in-wordpress/

Check us out on Facebook:
https://www.facebook.com/wpbeginner

Follow us on Twitter:
http://twitter.com/wpbeginner

Join our circle on Google+:
https://plus.google.com/+wpbeginner/

Checkout our website for more WordPress Tutorials
http://www.wpbeginner.com/

Summary of this Tutorial:

Start by installing and activating the Menu Image plugin.

Go to Appearance, Menus to configure.

Click set image to upload a image to the navigation menu, it will create 3 image sizes.

24X24, 36X36, and 48X48 and one should look best for your theme.

You can also use CSS classes under screen options on the menu page.

Scroll down and add a meaningful css class.

You also need to add the css in the child theme’s stylesheet for every image.

Related Links:

Menu Image

https://wordpress.org/plugins/menu-image/

source

31 Comments

  • Angela Johnson on December 28, 2014

    You speak and click your mouse a little too quickly for me to follow. 

  • James Handshoe on January 3, 2015

    Some nice information, but you sped through the video so fast that it made following along all but impossible. You spoke so fast that it felt like you couldn't be bothered to take your time long enough to ensure anyone could hear anything. There are no time limits on youtube, and nobody wants to watch and learn from tutorials at this speed.

  • NewMindSet2Success on February 21, 2015

    Probably they film video on mute then do Voice over But She Can't keep up either & I Appreciate the Info 110% but Not Delivery more like Orders than Instructions PPL Do not Learn well by be given Orders!!! [Initiates Resent-etc] But as an Marketer I Know I must Just Ignore any Kind of Video Fault to Absorb All Valuable Content, I see many times ppl hate heavy foreign accents but Lose Valuable Content by not watching
       

  • cameron burke on June 25, 2015

    this was shit. you went way to fast and when I activated my plug in it didnt work.

  • yassir bouhmadi on August 1, 2015

    you speak way too fast….this is not how you should talk to beginners.

  • Muzahid Zaman on September 2, 2015

    this video is awesome. Though the plug in didnot work the css work . Thanks .
    the css will be found at Appearence->Editor.

  • 2bgoods on September 2, 2015

    To provide alternative feedback regarding the speed, I love it personally. Efficient and to the point, pause it if necessary. All at 1:13 seconds. No extra filler. Beautiful, thank you.

  • TSIXGaming on November 18, 2015

    thanks worked for me!

  • ScreenPrintR on January 7, 2016

    Thanks for the Video. Pointed me in the direction I needed. The original precedure didn't work because I did not have the Menu defined. Once I did that the three settings were either too small 24 x 24 or too large. Noticed if I used the 48 x 48 and clicked on Before, the image was a little better. Guess we should just use the CSS.

  • ScreenPrintR on January 9, 2016

    Changed my image to Original Image and it worked great. Thank you!

  • Rob L on April 23, 2016

    No preview….? Too quick as well…

  • Patrick Bakker on May 17, 2016

    Not helpful at all! What does it look like??

  • Erik Kreider on May 22, 2016

    Wow, I know what I am doing and after watching that I know less. Maybe take a little time and not run through everything so fast. Show the what the various option look like at least.

  • You Jigzz on June 17, 2016

    AWESOME!! thank you for saving my butt!!

  • Amrish Mahabir on August 31, 2016

    What the fuck is it supposed to look like at the end?

  • Ken Lennox on September 14, 2016

    A real life demo/example would have helped.

  • archersfriend on October 4, 2016

    Why so FAST, This is SUPPOSED to be Informative Instruction, NOT A FRIKKIN RACE.

  • IT Sujon on February 11, 2017

    Awesome! Thank you so much

  • Mohsin Qasim on February 24, 2017

    you should show live after the implement anything..

  • TechTutorialsTV on April 11, 2017

    Thanks for creating this tutorial videos, I was looking for exactly same thing for my sites.
    And I found solutions in this video.

  • Biz-Help-Hub Channel on May 5, 2017

    too fast… I didnt get it! no result…slow down with ur next demonstration!

  • Amel Groos on June 28, 2017

    seriously at least show the result of what you are doing..

  • Christian Kirkorov on March 16, 2018

    Great content, being fast is not bad it's actually good, no need for stupid intros and talking about your dog or whatever. You can always pause or slow down a video using options. Keep it up!

  • Chris Parker on April 8, 2018

    PEOPLE – you can slow the speed yourself using YouTube's controls. See that gear icon in the lower right when you hover over the video? Click that, then change the value next to speed.

  • themesCode on May 4, 2018

    Menu looks cool if you add Icons before the menu level.

  • Charly The Pearl on May 30, 2018

    Too fast and not enough detail

  • Deepak K on August 8, 2018

    Not showing icon after uploading to menu option? Help me

  • Thanks showwwwww

  • Drew Spinoso on April 9, 2019

    Css code should have been included in show notes. Thanks

  • Tarequr Rahman on May 18, 2019

    GOLD!!! I owe u a beer. guys go to the link and read about it. video instruction not clear. but it works

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

 

 

error: WEBFINET SECURITY IS ON