Using font icons on toolbar buttons

3 posts, 0 answers
  1. jlj30
    jlj30 avatar
    102 posts
    Member since:
    Jan 2011

    Posted 16 Jan 2015 Link to this post


    I've recently come across what I believe are called font icons.
    I've had some success using these icons by specifying SpriteCssClass on my RadToolBarButton's.

    However, as soon as I specify a Skin for the toolbar, the icons do not render.
    See the attached screenshots of the toolbar with and without a skin specified.

    Here's my toolbar declaration (only the first 2 buttons included):

    <telerik:RadToolBar ID="RadToolBar1" runat="server" RenderMode="Lightweight" Skin="Office2007" Orientation="Horizontal" EnableImageSprites="True" EnableEmbeddedSkins="True" EnableRoundedCorners="true">
        <CollapseAnimation Duration="200" Type="OutQuint" />
            <telerik:RadToolBarButton runat="server" Tooltip="Zoom In" SpriteCssClass="icon-TBi__Zoomin toolBarIconStyle">
            <telerik:RadToolBarButton runat="server" Tooltip="Zoom Out" SpriteCssClass="icon-TBi__Zoomout toolBarIconStyle">

    Any suggestions as to how to make this work.

    Thanks in advance.


  2. jlj30
    jlj30 avatar
    102 posts
    Member since:
    Jan 2011

    Posted 17 Jan 2015 in reply to jlj30 Link to this post

    Hi again,

    I just noticed that the font icons are not actually being placed ON the buttons, but just to the left of them.
    So when I hover over the icon, I see an empty button appear to its right.

    Am I doing something that's even supported?
    Should I revert to using ImageUrl?


  3. Ivan Zhekov
    Ivan Zhekov avatar
    651 posts

    Posted 21 Jan 2015 Link to this post

    Hello, Jim.

    Can you send us your test page so we can look at it locally? You should be able to use font icons on the toolbar, so I guess it's a minor thing.

    Ivan Zhekov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top