How to change the sidebar FA icons

Ruby

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

Niro

Customer
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 ;)
 

Russ

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

Code:
.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.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.