How to change the sidebar FA icons

[Niro]

Hi,

I don't know how can I change them, could you please guide me ?

Thank you !

 

[Ruby]

Go to the ACP / appearance/ styles/ style Properties/ sidebar then check the box that says enable Font Awesome.

 

[Niro]

Go to the ACP / appearance/ styles/ style Properties/ sidebar then check the box that says enable Font Awesome.

I already did that, but I want to change those icons with another icon. But I don’t know how/where to do this.

Anyway, thanks for your answer

 

[Ruby]

I think you would need a template modifation to do that. @Russ or @Steve will have a better answer.

 

[Russ]

This is the the CSS you can use to overwrite any icon:

.XenBase .p-body-sidebar, .XenBase .p-body-sideNavContent
{
    [data-widget-definition="find_member"] .block-minorHeader:before
    {
        content: "\f002";
    }
    [data-widget-definition="birthdays"] .block-minorHeader:before
    {
        content: "\f1fd";
    }
    [data-widget-definition="new_posts"] .block-minorHeader:before
    {
        content: "\f086";
    }
    [data-widget-definition="new_profile_posts"] .block-minorHeader:before
    {
        content: "\f040";
    }
    [data-xf-init="poll-block"] .block-minorHeader:before
    {
        content: "\f080";
    }
    [data-widget-section="staffMembers"] .block-minorHeader:before
    {
        content: "\f0e3";
    }
    [data-widget-section="onlineNow"] .block-minorHeader:before
    {
        content: "\f0c0";
    }
    [data-widget-definition="member_stat"] .block-minorHeader:before
    {
        content: "\f201";
    }
    [data-widget-key="forum_overview_forum_statistics"] .block-minorHeader:before
    {
        content: "\f1fe";
    }
    [data-widget-key="forum_overview_share_page"] .block-minorHeader:before
    {
        content: "\f1e1";
    }
    [data-widget-key="member_wrapper_find_member"] .block-minorHeader:before
    {
        content: "\f002";
    }
    [data-widget-key="member_wrapper_newest_members"] .block-minorHeader:before
    {
        content: "\f0c0";
    }
    [data-widget-key="forum_list_new_profile_posts"] .block-minorHeader:before
    {
        content: "\f04";
    }
    [data-widget-key="forum_overview_new_posts"] .block-minorHeader:before
    {
        content: "\f086";
    }
    [data-xf-init="poll-block ajax-submit"] .block-minorHeader:before
    {
        content: "\f080";
    }
    [data-widget-definition="xfmg_latest_comments"] .block-minorHeader:before
    {
        content: "\f086";
    }
    [data-widget-definition="xfmg_media_slider"] .block-minorHeader:before
    {
        content: "\f03d";
    }
    [data-widget-definition="xfmg_gallery_statistics"] .block-minorHeader:before
    {
        content: "\f1fe";
    }
    [data-widget-definition="xfrm_top_resources"] .block-minorHeader:before
    {
        content: "\f005";
    }
    [data-widget-definition="xfrm_new_resources"] .block-minorHeader:before
    {
        content: "\f085";
    }
}

Icon list here: https://fontawesome.com/v4.7.0/cheatsheet/

You can inspect each block to find out the data-widget-defition.