css - 带有Awesome图标的Telerik RadButton左对齐

我正在尝试使用真棒字体Icon从telerik设置RadButton，但是我没有弄清楚如何以与Telerik Icon相同的方式放置Icon



我的代码：

<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;
}

最佳答案

在Lightweight RenderMode中使用字体图标要容易得多，因为它也将字体图标用于内置图标

虽然您的解决方案可以工作，但是有一个更简单的解决方案：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>

将RenderMode="Lightweight"设置为RadButton应该可以进行相同的操作。