If you do add them, keep your label brief — search engines frown on hidden text. This is worth adding to each new link. The area of primary interest is your nav menu — from the visitor website perspective. Simplifying in places, the selectors you need will look roughly like this in view source, or — so much easier! Your ID numbers will vary, but will be sequential if you added all the new links to your WP menu at the same time.
Again, your identifiers will be different, but the basic look of the HTML will be similar. If you used the sprite file from earlier as your image, then your nav menu should now look like this:. Save my name, email, and website in this browser for the next time I comment. We use cookies to give you the best online experience. By agreeing you accept the use of cookies in accordance with our cookie policy.
When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here. Remember me Log in. Lost your password? Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our privacy policy.
Once uploaded, you need to copy their URLs and paste them in a text editor like Notepad. After that, scroll down and click on any menu item to expand its settings. Now you need to add this custom CSS to your theme. Depending on your theme, you may need to tweak the CSS a little bit to get the perfect placement for menu icons. Once you are satisfied with the result, repeat the process for all menu items. 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, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook. Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded , why it matters, and how you can support us.
Trusted by over 1. Get FREE access to our toolkit — a collection of WordPress related products and resources that every professional should have! Hi, how could I modify the code to hide the menu link and only show the icon? Thanks for your help. I try this plugin but facing issue while creating sub-menu. All things I set it up as per guidelines. Glad you like our content. Hey thanks a lot for this advise. This tutorial is for placing the icon next to the word in your menu.
May I use link for this tutorial in plugin official description? And feel free to contact me in case if it misses some useful features, I can add it in new releases. Yes, please feel free to add the link and we appreciate it.
However, we do not allow full copy of an article. Regardless of what you want to add, modifying the navigation menu is a start when giving visitors a way to manage your site. What kind of modifications have you made to the navigation menu? Your email address will not be published. This site uses Akismet to reduce spam. Learn how your comment data is processed.
Share via: Facebook Twitter LinkedIn. Related Posts. Leave a Comment Cancel Reply Your email address will not be published. Copy link.
0コメント