带有 Awesome 图标的 Telerik RadButton 左对齐

Question

我正在尝试使用超棒的字体图标设置 telerik 的 RadButton，但我不知道如何以与 Telerik 图标相同的方式定位图标

我的代码：

<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

好的，我知道了：

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

Answer 2

在 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 应该可以让您做同样的事情。

带有 Awesome 图标的 Telerik RadButton 左对齐

Telerik RadButton with Awesome icon align left

css

icons

telerik

font-awesome