In the CMS I developed, I'm providing administrators with an admin bar in an ASCX file using RadToolBar when viewing content pages. I want to assign icons to RadToolBarButtons and RadToolBarDropDowns, just like the icons on other toolbars in the admin panel, using the icons from the document at https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/. Since other toolbars have text on their buttons, I can simply assign icons using `.rtbText::before`. However, this method doesn't work for the content page toolbar buttons because they don't have text. All the methods I've tried to assign icons to both text-based and textless buttons have led to different problems. The methods in the Telerik documentation are generally written for RadButtons and similar controls. I can find it somewhere
<telerik:RadToolBar ID="RadToolBar1" runat="server">
<Items>
<telerik:RadToolBarButton Text="Settings" SpriteCssClass="fas fa-cog custom-icon" />
</Items>
</telerik:RadToolBar>
CSS:
.RadToolBar .rtbItem .rtbIcon:before {
font-family: 'WebComponentsIcons';
font-weight: 900;
}
.custom-icon:before {
content: "\f013";
}This method didn't show any icons either. The classes given within SpriteCssClass are not reflected in the HTML output at all.
The toolbar is already LightWeight.
What's the correct way to do this? The only solution I've found so far that doesn't break anything else is to write the icons directly into the text as Unicode characters, but for system-wide standardization, I would prefer a solution that uses the WebComponentsIcons fonts.