XF 2.1 How to modify the icon on custom sidebar widgets?

[ProleX]

I created a new widget for the sidebar and tried to find out how to change the icon for it but ran in to problems.
For example, the default "members online" widget has an identifier called "onlineNow " and I can use this in extra.less to modify the icon of it like so:

.p-body-sidebar [data-widget-section="onlineNow "] .block-minorHeader:before, .p-body-sideNavContent [data-widget-section="onlineNow"] .block-minorHeader:before {
    content: "\f013";
}

I can't find the identifier for newly created widgets, so I'm kind of stuck here.
I probably need to create one somewhere, but where?
Any ideas on how to achieve what I'm trying to do?

 

[djbaxter]

The identifier for any widget is the Widget key you entered at AdminCP >> Appearance >> Widgets >> {widget title}. This is required when you create a widget.

Try something like this in extra.less:

/* trending widgets */
[data-widget-key="trending_dl6"] h3.block-minorHeader:before {
    display: inline-block;
    padding-right: 0px;
    .m-faBase();
    .m-faContent(@fa-var-comments);
}