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.