[cXF] Sidebar block title icons

[BassMan]

BassMan submitted a new resource:

[cXF] Sidebar block title icons - Add icons to sidebar block titles

Would you like to have icons in the sidebar block titles like this?

View attachment 206035


Here's a simple DIY tutorial on how to achieve this.


Below you'll find the code for most common sidebar blocks.

Open your extra.less template and add this code:

[data-widget-section="staffMembers"] h3.block-minorHeader:before { /* Staff online */
    display: inline-block;
    padding-right: 5px;
    .m-faBase();
    .m-faContent(@fa-var-user-tie);
}...

Read more about this resource...

 

[SyTry]

Hello,

Thank you for this tutorial, but don't you think there is too much code here ? I try to manipulate the CSS but I can't find another methode with less code

Regards, SyTry

 

[BassMan]

Hello,

currently, it's done how it this.

Regards,
BassMan

 

[kolakube]

Pretty straightforward copy and paste method - I customized it for @AndyB's Recently Online addon too. Thanks for the resource @BassMan.

 

[Nirjonadda]

Also can be work with this CSS Code.

.block-minorHeader::before{

    .block[data-widget-definition="your_widget_key"] &{
        .m-faContent(@fa-var-FAiconName);
    }
    
}