Can I add a menu item icon

Is it possible to add an icon to the menu items like in the screenshot?

2 Likes

Hi! I don’t see a direct way to add icons in the Menu item from a Menu element.
But, it can be done by adding some custom CSS.

2 Likes

Hi Lucian,

Would you have such a snippet to save me time?

Thanks

1 Like

Hi! … Sure … but, this will be a bit advanced.

Here is how you can add icons to Menu items from a Menu element, so you can go from:


to:

  1. Attach a custom class to your Menu element let’s say “menu-with-icons”. To do this, select your Menu element, go to the Style → ID&Class and add the “menu-with-icons” class
  2. Then, in the CSS editor add the following scss code:
.menu-with-icons {
  > ul {
    > li {
      //common link properties
      a {
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 24px !important; //left space
      }

      //first link icom
      &:nth-child(1) {
        a {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16'%3E%3Cg transform='translate(0, 0)'%3E%3Cellipse fill='none' stroke='%23444444' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='8' cy='12.5' rx='7.5' ry='3' data-cap='butt'%3E%3C/ellipse%3E%3Cpath fill='none' stroke='%23444444' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' d='M15.5,12.5 c0-1.961-1.181-3.697-3-4.792V5c0-2.485-2.015-4.5-4.5-4.5S3.5,2.515,3.5,5v2.708c-1.819,1.095-3,2.831-3,4.792' data-cap='butt'%3E%3C/path%3E%3Cpath fill='none' stroke='%23444444' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' d='M10.5,11.5 c0,1.105-1.119,2-2.5,2s-2.5-0.895-2.5-2' data-cap='butt' data-color='color-2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
        }
      }

      //second link icon
      &:nth-child(2) {
        a {
          //add bg here for the second menu items
        }
      }
    }
  }
}
  1. Let’s see what all this scss means.
  • The selector > li > a sets the common properties for all the links, in our case we are interested to leave some space on the left of the item using the padding-left property
  • We are adding individual icons as a background images (SVG B64 encoded) for each menu item, so the selector &:nth-child(1) targets out first menu item, we can target the second one with the &:nth-child(2) selector, and so on for the rest of the menu items
  • The background-image value is an SVG in B64 encoding format, you can use this on-line tool. to convert any SVG to a background-image B64 encoded value URL-encoder for SVG

I hope all this, makes any sense. Done.

3 Likes

Thank you Lucian,

This is excellent :smiling_face_with_three_hearts:

Charlie

1 Like