Using font icons on toolbar buttons

[jlj30]

Hi,

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" />
    <Items>
        <telerik:RadToolBarButton runat="server" Tooltip="Zoom In" SpriteCssClass="icon-TBi__Zoomin toolBarIconStyle">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarButton runat="server" Tooltip="Zoom Out" SpriteCssClass="icon-TBi__Zoomout toolBarIconStyle">
        </telerik:RadToolBarButton>
    </Items>
</telerik:RadToolBar>

Any suggestions as to how to make this work.

Thanks in advance.

Jim

[jlj30]

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?

Thanks

Jim

[Ivan Zhekov]

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.

Regards,
Ivan Zhekov
Telerik