As you can see you can get an icon that changes on hover only on new items just to highlight them a bit more.
Open you extra.less template and add the code:
Code:
/*** Highlight new menu item ***/
.menu-row.menu-row--separated.menu-row--clickable.menu-row--highlighted {
&:before {
.m-faBase();
.m-faContent(@fa-var-dot-circle);
float: right;
color: @xf-paletteAccent2;
}
&:hover:before {
.m-faBase('Pro', @faWeight-solid);
.m-faContent(@fa-var-dot-circle);
}
}
/**********/
To edit the icon check class &:before. To change the Font Awesome icon edit the word dot-circle (in above example) with any other icon name.
To change the icon color edit the color property.
To edit icon when hover check class &:hover:before.
Want a Pro icon of a specific style?
Edit .m-faBase(); and change it to .m-faBase('Pro', @faWeight-solid);, .m-faBase('Pro', @faWeight-regular); or .m-faBase('Pro', @faWeight-light);.
Want a Brand icon?
Edit .m-faBase(); and change it to .m-faBase('Brands');.