带有真棒图标的 Telerik RadButton 左对齐答案

【问题标题】：Telerik RadButton with Awesome icon align left带有真棒图标的 Telerik RadButton 左对齐
【发布时间】：2016-08-04 08:29:12
【问题描述】：

我正在尝试使用很棒的字体图标从 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;
}

【问题讨论】：

标签： css telerik icons font-awesome

【解决方案1】：

在轻量级渲染模式中使用字体图标要容易得多，因为它也使用内置图标的字体图标

虽然您的解决方案可行，但还有一个更简单的解决方案：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 应该可以让您做同样的事情。

【讨论】：

【解决方案2】：

好的，我知道了：

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

【讨论】：