我正在尝试使用很棒的字体图标从 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;
}
最佳答案
在 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 应该可以让您执行相同的操作。
关于css - 带有 Awesome 图标的 Telerik RadButton 左对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38762228/