This is a migrated thread and some comments may be shown as answers.

Using font icons on toolbar buttons

2 Answers 58 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
jlj30
Top achievements
Rank 2
jlj30 asked on 17 Jan 2015, 12:45 AM
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






2 Answers, 1 is accepted

Sort by
0
jlj30
Top achievements
Rank 2
answered on 17 Jan 2015, 04:52 PM
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
0
Ivan Zhekov
Telerik team
answered on 21 Jan 2015, 09:26 AM
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
 

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.

 
Tags
ToolBar
Asked by
jlj30
Top achievements
Rank 2
Answers by
jlj30
Top achievements
Rank 2
Ivan Zhekov
Telerik team
Share this question
or