Add Icons to the Navigation Menu
Building better MyListing websites. One code snippet at a time.
Overview
The Add Icons to the Navigation Menu code snippet allows for more design capabilities within a MyListing website.
Make your navigation menu more eye-catching!
Implementation
- Grab the code snippet.
- Follow the provided instructions.
- Save your changes.
//// INSTRUCTIONS:
//// Copy and paste the code snippet below into Theme Tools > Theme Options > Custom Code > CSS.
//// NOTES: Please find the detailed notes below, shown after the code snippet.
--------------------------- CODE SNIPPET IS BELOW THIS LINE ---------------------------
/* ML - ADD ICONS TO THE NAVIGATION MENU */
.main-nav li a>i {
display: inline-block;
}
.main-nav li.current-menu-item a > i {
color: #000 !important;
}
--------------------------- CODE SNIPPET IS ABOVE THIS LINE ---------------------------
Custom Icons
1. Download the desired PNG icons (Note: Choosing icons of color "white", is recommended)
2. Upload the icons to the WordPress Media Library
3. Edit an icon and copy its link address
4. Edit a menu item
5. To the left or right of the menu item name, paste the link address that was copied above
Example for adding an icon to the Home page:
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="http://your-website.com/wp-content/uploads/icon-file-name.png"><noscript><img src="http://your-website.com/wp-content/uploads/icon-file-name.png"></noscript> Home
Native/Theme Icons
1. Theme Options > Shortcodes > Icon
2. Find your desired icon and copy the shortcode
3. Edit a menu item
4. To the left or right of the menu item name, paste in the icon's shortcode copied above