Carlos Martins Carlos Martins - 4 months ago 26
CSS Question

Telerik RadButton with Awesome icon align left

I'm trying to set a RadButton from telerik with a awesome font Icon, but I'm not figuring out how to position the Icon the same way as the Telerik Icon

enter image description here

My code:

<div class="buttons-set">
<telerik:RadButton runat="server" Text="Filter" Width="110px" Skin="Default">
<ContentTemplate>
<i class="fa fa-filter left"></i> Filter
</ContentTemplate>

</telerik:RadButton>
<telerik:RadButton runat="server" Text="Clear filter" Width="110px" Skin="Default">
<Icon PrimaryIconCssClass="rbCancel red" PrimaryIconLeft="6px" PrimaryIconTop="2px" />
</telerik:RadButton>
</div>

.left {

text-align:left !important;
}
.red {
color:#BC204B !important;
}

Answer

Using font icons is much easier in the Lightweight RenderMode because it uses font icons for the built-in ones too

While your solution can work, there is an easier one: http://docs.telerik.com/devtools/aspnet-ajax/controls/pushbutton/functionality/Icons/custom-icons#font-icons

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<style>
    button.RadButton.fa .rbIcon:before {
        font-family: FontAwesome;
    }
</style>
<telerik:RadPushButton ID="RadButton1" runat="server" Text="Button With Custom Font Icon" CssClass="fa">
    <Icon CssClass="fa-bed" />
</telerik:RadPushButton>

Setting RenderMode="Lightweight" to the RadButton should let you do the same.