MyListing Club

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

  1. Grab the code snippet.
  2. Follow the provided instructions.
  3. 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=&#039;http://www.w3.org/2000/svg&#039;%20viewBox=&#039;0%200%200%200&#039;%3E%3C/svg%3E" class="perfmatters-lazy" data-src="http://your-website.com/wp-content/uploads/icon-file-name.png" loading="lazy" /><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