HDTutorial
EN
How to Add Image Icons With Navigation Menus in WordPress

Playback starts YouTube’s embedded player (privacy-enhanced mode).

How to Add Image Icons With Navigation Menus in WordPress

130,910 views October 26, 2019 5:11

Watch on YouTube
ChannelWPBeginner - WordPress Tutorials

Description from the creator

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
wpbeginner.com/plugins/how-to-add-image-icons-w…
►MonsterInsights monsterinsights.com/ Promo Code WPBVIP

--Top Resources--

Use Promo Code WPBVIP

►Best WordPress Contact Form Plugin wpforms.com/wpbeginner
►Best WordPress Analytics Plugin monsterinsights.com/
►Best Lead Generation Plugin optinmonster.com/
►Best WordPress SEO Plugin aioseo.com/
►Best Landing Page Builder for WordPress seedprod.com/
►Best WordPress Giveaway Plugin rafflepress.com/

--Related Videos--
►WordPress Tutorial - How to Make a WordPress Website for Beginners youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme youtube.com/watch?v=ZIPQRQLAz90

The code we use for the second method can be found here:
wpbeginner.com/plugins/how-to-add-image-icons-w…

For the first method, we will be showing you we will be using the plugin "Menu Image" found here:

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.
youtube.com/subscription_center?add_user=wpbegi…

Check us out on Facebook
facebook.com/wpbeginner

Follow us on Twitter
twitter.com/wpbeginner

Check out our website for more WordPress Tutorials
wpbeginner.com
#WordPress #WordPressTutorial #WPBeginner

About this tutorial

WPBeginner - WordPress Tutorials published this 5:11 video tutorial on October 26, 2019. It has been watched 130,910 times on YouTube.

Duration
5:11
Published
October 26, 2019
Views
130,910
Likes
925

Tags

Share

Further reading

  • How to Add Image Icons to Navigation Menu Items in WordPress greengeeks.com

    Adding Menu Icons with CSS. Another method to add images to the menu bar in WordPress is through CSS coding. With a few simple lines, you can tell your theme to look for the image and show it in the navigation menu. Fro…

  • How to Add Icons to WordPress Custom Menus Without Plugins sktthemes.org

    By custom menus, we mean to say that you can add icons on any menu you have on your website start from the navigation menu to double menu on the top where social media icons and contact icons are placed with call to act…

  • How to Add Image Icons With Navigation Menus in WordPress wpbeginner.com

    That’s all. We hope this article helped you learn how to add image icons with navigation menus in WordPress. You may also want to check out our guide on how to style WordPress navigation menus. If you liked this article…

This tutorial in other languages