Telerik RadButton с Потрясающим значком Выровнять по левому краю

Question

Я пытаюсь установить RadButton из Telerik с удивительным шрифтом Icon, но я не выяснить, как позиционировать икону так же, как иконы 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

Использование иконки шрифтов гораздо проще в легком 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

Ok Я получил это:

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