5 Answers, 1 is accepted
The syntax is as follow:
.re<customToolName>:before {
content: "\iconnumber" !important;
}
For example if the tool name is custom2 and you'd like to apply the bold font icon over it use this class:
<style>
.reCustom2:before {
content: "\e601" !important;
}
</style>
as shown in the example below
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style> .reCustom2:before { content: "\e601" !important; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager runat="server" ID="ScriptManager"></asp:ScriptManager> <telerik:RadEditor runat="server" RenderMode="Lightweight" ID="RadEditor1"> <Tools> <telerik:EditorToolGroup> <telerik:EditorTool Name="Bold" /> <telerik:EditorTool Name="Custom2" /> <telerik:EditorTool Name="Custom3" /> </telerik:EditorToolGroup> </Tools> </telerik:RadEditor> </form></body></html>Regards,
Rumen
Progress Telerik
Rank 1
Thanks Rumen!
Where can I get a list of the icon numbers?
-Jim
Rank 1
The answer you provided doesn't seem to work if RenderMode="Classic"
Is there a different set of icons?
The different render modes use completely different rendeing and images. The Classic mode uses sprites (I'm attaching here one of the editor's), while the lightweight mode uses font icons. You can read more about this here: https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/toolbars/buttons/set-button-state#set-icons-for-toolbar-button-states.
On a list of icons numbers - you can try the Kendo font library list (https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web) since we share some codebase and fonts with the Kendo widgets but I cannot guarantee 100% parity, you'd have to test things.
Regards,
Marin Bratanov
Progress Telerik
Rank 1
Thanks for the sprites image Marin. That's exactly what I needed. It's working now.
Thank you!