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.
Implementation
Snippet Type: CSS
- Grab the code snippet.
- Follow the instructions.
- Adjust as desired.
- Save your changes.
//// INSTRUCTIONS:
//// Use a plugin like WPCodeBox to add this code snippet to your website.
//// WPCodeBox Guide and Discount: 🔥 https://mylisting.club/wpcodebox 🔥
//// To use the native MyListing 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
//// To use 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
//// NOTES:
//// 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" class="perfmatters-lazy" data-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
----------------- CODE SNIPPET IS BELOW THIS LINE - REMOVE THIS LINE AND ABOVE -----------------
/* 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;
}