This is a migrated thread and some comments may be shown as answers.

Custom Font

4 Answers 18 Views
Button
This is a migrated thread and some comments may be shown as answers.
RSousa
Top achievements
Rank 1
RSousa asked on 22 Dec 2018, 06:19 PM

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

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 23 Dec 2018, 07:25 PM
Hello,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
RSousa
Top achievements
Rank 1
answered on 26 Dec 2018, 08:29 AM

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.

 

0
RSousa
Top achievements
Rank 1
answered on 09 Jan 2019, 07:21 PM

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?

0
Accepted
Marin Bratanov
Telerik team
answered on 10 Jan 2019, 03:09 PM
Hello,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Button
Asked by
RSousa
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
RSousa
Top achievements
Rank 1
Share this question
or