Widget (side bar) icons

[Ehren]

Sidebar widgets in xenfocus themes have FontAwesome icons assigned to them. Some 3rd party widgets may display an ellipsis (...) if no icon has been assigned. To change this, you must first view your page source (right click > View Page Source). Scroll down until you find the code for your widget. For this example, we'll be referring to a widget called "Attachment Stats", which looks like this:

<div class="block" data-widget-id="14" data-widget-key="attachment_stat" data-widget-definition="ozzModzAttachStats">

The important part here is the data-widget-definition code, which we'll need in a moment.

Next, head over to the FontAwesome icon database and find an icon which you'd like to use. For this example, we'll use a paperclip. We need to know it's icon name, which is paperclip.

With these two pieces of information in mind, head over to your extra.less file and paste the following (replacing ozzModzAttachStats and paperclip with your own values):

.block[data-widget-definition="ozzModzAttachStats"] .block-minorHeader::before{
    .m-faContent(@fa-var-paperclip);
}

If you still require assistance after following this tutorial, simply post below and I'll do my best to help!

 

[Seeker-Smith]

Ehren,
Thanks for the tutorial. This works great on the main page widget but with Novus if you click a widget title like "Online Stat" the secondary page does not show the icon. Like in this example.

 

[Ehren]

Thanks @Seeker-Smith . I'll fix this in the next update

 

[Seeker-Smith]

Awesome thanks.

 

[rehammer]

Hello, I'm having a few issues with other icons. When I try to use any other icon (from the ones I tested) mess up my forum and do not show up.

I copied the code and inspected my page element to find the right data widget definition. The paperclip icon worked properly, but I've tried the following icons with no luck

fa-clock
fa-user-clock
fa-clock-rotate-left

This is the code:

.block[data-widget-definition="sys_recentmembers"] .block-minorHeader::before{
    .m-faContent(@fa-clock-rotate-left);
}

 

[Ehren]

Hello,

It looks like you've missed the var in your code. Does this work?

.block[data-widget-definition="sys_recentmembers"] .block-minorHeader::before{
    .m-faContent(@fa-var-clock);
}

 

[rehammer]

Hello,

It looks like you've missed the var in your code. Does this work?

.block[data-widget-definition="sys_recentmembers"] .block-minorHeader::before{
    .m-faContent(@fa-var-clock);
}

That worked, thank you!

 

[anil]

worked perfectly, thanks!

 

[makayweb]

thank you @Ehren it's working.