MyListing Club

Add Icons to the Navigation Menu

Building better MyListing websites. One code snippet at a time.


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!


  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 --------------------------- 

.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;;%20viewBox=&#039;0%200%200%200&#039;%3E%3C/svg%3E" class="perfmatters-lazy" data-src="" loading="lazy" /><noscript><img src=""></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