Hi,
How I can render a icon from a custom font inside of a button using a <i> tag?
<telerik:RadButton ID="btSearch" runat="server" Primary="true" Text="<i class='zmdi zmdi-search'></i> Search" EnableEmbeddedSkins="false" OnClick="btSearch_Click"></telerik:RadButton>
Attached is the problem and the button (objective) I want to accomplish.
Thanks
4 Answers, 1 is accepted
The easiest way is to use a CSS class: https://docs.telerik.com/devtools/aspnet-ajax/controls/pushbutton/functionality/Icons/custom-icons#font-icons.
If using the <i> tag is vital (by default the button will render a <span>), you can use its template: https://docs.telerik.com/devtools/aspnet-ajax/controls/pushbutton/functionality/contenttemplate.
Regards,
Marin Bratanov
Progress Telerik
I used the logic of your example and used it on a Redbutton.
Here was my final version:
<telerik:RadButton ID="btSearch" runat="server" Primary="true" Text="Search" Skin="AKI" EnableEmbeddedSkins="false" OnClick="btSearch_Click" CssClass="cfont"><Icon PrimaryIconCssClass="zmdi zmdi-search" /></telerik:RadButton>
on css side:
button.RadButton.cfont .rbIcon:before {
font-family: $font_icon_name; // I use scss files... I have a global variable for the icon font.
}
Thank you.
If I want to use the Stacking functionality of Font Awesome like this one:
<
span
class
=
"fa-stack fa-2x"
>
<
i
class
=
"fas fa-square fa-stack-2x"
></
i
>
<
i
class
=
"fab fa-twitter fa-stack-1x fa-inverse"
></
i
>
</
span
>
How I can do it?
You can put such custom HTML in the <ContentTemplate> of the button: https://docs.telerik.com/devtools/aspnet-ajax/controls/pushbutton/functionality/contenttemplate.
Regards,
Marin Bratanov
Progress Telerik