XenForo Add Font icon to Widget Block

[XenForo]

Step 1 :

• extra.les

/** Icon Vigeat Tolbar @ XNFORO.IR * */
.block {
    h3:before {
        display: inline-block;
        .m-faBase();
        padding-right: 3px;
            }
&[data-widget-section="staffMembers"] {
        h3 {
            .m-faBefore("\f0e3");
        }
    }

    &[data-widget-section="onlineNow"] {
        h3 {
            .m-faBefore("\f007")
        }
    }

    &[data-widget-definition="new_profile_posts"] {
        h3 {
            .m-faBefore("\f086")
        }
    }

    &[data-widget-definition="forum_statistics"] {
        h3 {
            .m-faBefore("\f080")
        }
    }

    &[data-widget-definition="share_page"] {
        h3 {
            .m-faBefore("\f14d")
        }
    }

    &[data-widget-definition="find_member"] {
        h3 {
            .m-faBefore("\f002")
        }
    }

    &[data-widget-definition="newest_members"] {
        h3 {
            .m-faBefore("\f234")
        }
    }

    &[data-widget-definition="birthdays"] {
        h3 {
            .m-faBefore("\f1fd")
        }
    }

    &[data-widget-definition="xfrm_new_resources"] {
        h3 {
            .m-faBefore("\f187")
        }
    }

    &[data-widget-definition="xfrm_top_resources"] {
        h3 {
            .m-faBefore("\f091")
        }
    }

    &[data-widget-definition="xfrm_latest_reviews"] {
        h3 {
            .m-faBefore("\f005")
        }
    }

    &[data-widget-key="xfrm_overview_top_authors"] {
        h3.block-minorHeader {
            .m-faBefore("\f201")
        }
    }
}
/** Icon Vigeat Tolbar @ XNFORO.IR * */

Step 2 :

 

[Max]

how to do it for html widget?

 

[Marks-Man]

how to do it for html widget?

Send screenshot, I didn't get your point

 

[Marks-Man]

Got your point, If you are 100% sure that it is a widget, Go to widgets and give it ID
and add to your css

Replace "test" with your widget ID

.block[data-widget-key="test"] h3:before {
content: "\f233";
display: inline-block;
text-align: center;
}

 

[Max]

Got your point, If you are 100% sure that it is a widget, Go to widgets and give it ID
and add to your css

Replace "test" with your widget ID

sure that it's a widget.

id, key and definition have only in adminCP, but your css not working for me

.block[data-widget-key="sitelinks"] h3:before {
content: "\F0339";
}

there no changes

if i gonna trying to get css from ": :before" element, changes will apply for all default widget icons...