带有Awesome图标的Telerik RadButton左对齐

Question

我试图用一个很棒的字体图标来设置来自telerik的RadButton，但是我并没有弄清楚如何以与Telerik图标相同的方式定位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;
}

Answer 1

在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可以让你这样做。

Answer 2

好的，我有这个：

.left {  
   position:absolute !important;
   margin-right: 38px !important;
   margin-top: 3px; 
}