Using Telerk Toolbar images for RadEditor

6 posts, 1 answers
  1. Jim
    Jim avatar
    17 posts
    Member since:
    Apr 2018

    Posted 03 May 2018 Link to this post

         How can I use one of the Telerik toolbar images for a custom toolbar button?
  2.
  3. Rumen
    Admin
    Rumen avatar
    14153 posts

    Posted 04 May 2018 Link to this post

    Hello,

    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


    <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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Jim
    Jim avatar
    17 posts
    Member since:
    Apr 2018

    Posted 07 May 2018 in reply to Rumen Link to this post

    Thanks Rumen!

    Where can I get a list of the icon numbers?

     

    -Jim

  7. Jim
    Jim avatar
    17 posts
    Member since:
    Apr 2018

    Posted 07 May 2018 in reply to Rumen Link to this post

    The answer you provided doesn't seem to work if RenderMode="Classic"

    Is there a different set of icons?

     

  8.
  9. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    5017 posts

    Posted 10 May 2018 Link to this post

    Hello Jim,

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. Jim
    Jim avatar
    17 posts
    Member since:
    Apr 2018

    Posted 10 May 2018 in reply to Marin Bratanov Link to this post

    Thanks for the sprites image Marin.  That's exactly what I needed.  It's working now.

     

    Thank you!

Back to Top