Telerik RadButton mit Awesome Symbol align links

Question

Ich versuche, einen RadButton von telerik mit einem ehrfürchtigen Schriftart Symbol zu setzen, aber ich bin nicht herauszufinden, wie du das Symbol auf die gleiche Weise wie das Telerik-Symbol positionieren

Mein Code:

<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

Schrift Symbole zu verwenden ist viel einfacher im Leichtbau Render weil es Schriftart Symbole für die eingebauten in denen verwendet zu

Während Ihre Lösung arbeiten kann, gibt es einen einfacheren ein: 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> 

Rahmen RenderMode="Lightweight" an den RadButton sollten Sie das gleiche machen.

Answer 2

Ok ich habe das bekam:

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