Telerik的RadButton與真棒圖標左對齊

我試圖從Telerik的設置RadButton與真棒字體圖標，但我沒有搞清楚如何以同樣的方式定位圖標爲Telerik的圖標Telerik的RadButton與真棒圖標左對齊

我的代碼：

<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; 
}

來源

2016-08-04 Carlos Martins

使用字體圖標是在輕量級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>

設置給RadButton的RenderMode="Lightweight"應該讓你做同樣的事情。

來源

2016-08-09 08:18:42 rdmptn

解決方案的性能更佳 –

好，我得到這個：

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

來源

2016-08-04 08:59:26

Telerik的RadButton與真棒圖標左對齊

回答

相關問題