Carlos Martins Carlos Martins - 1 year ago 217
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">
<i class="fa fa-filter left"></i> Filter

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

.left {

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

Answer Source

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:

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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download