How to add custom icons in front of a menu items in x

How to add custom icons in front of a menu items in x

Hi There,

Go to Appearance > Menu and then add the icon code on Navigation Label text field before the menu text.
See this: https://screencast-o-matic.com/watch/cb6D2gIdlP
You can get the icon code here: http://demo.theme.co/integrity-1/shortcodes/icons/. Select the icon you want to use, inspect and then copy icon html code something like this:

<i class="x-icon x-icon-trophy" data-x-icon="" aria-hidden="true"></i>

In case your icon is not on the list or an image type, add class on certain menu item:

Then use this custom CSS:

.my-menu a:before {
    background-image: url(http://virtualhost.dev/xv2/wp-content/uploads/2017/10/bg-exclusive.jpg);
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 26px;
    content: "";
}
.my-menu a span {
    margin-left: 30px; /* should be equal to the width value above*/
}

Feel free to adjust CSS property values and the image source.

Hope this helps.