Custom Icons

This help article shows how to use custom icons (images or font icons) in RadPushButton.

• Image Icons

• Font Icons

Image Icons

To display an image icon on the button, you need to set the Icon.Url property to point to the URL of the desired image.

Figure 1: RadPushButton with custom icon set through the Icon.Url property.

Example 1: Configure a RadPushButton with an icon through the Icon.Url property.

<telerik:RadPushButton ID="RadPushButton1" runat="server" Text="Button With Custom Image Icon">
    <Icon Url="https://demos.telerik.com/aspnet-ajax/button/examples/customicons/images/eFind.png" Top="5" Left="8" />
</telerik:RadPushButton>

Hovered and Active States

RadPushButton also provides an easy way to show different icon when the mouse is over the control, or the button is pressed (see Figure 2 and Example 2). To do this, use the HoveredCssClass and PressedCssClass properties exposed by the Icon tag.

Figure 2: A RadPushButton can have different icons for its normal, hovered and active state.

Example 2: Setup unique icons for the normal, hovered and active state of a RadPushButton.

<telerik:RadPushButton ID="RadPushButton1" runat="server" Text="Normal Hover Active State Icons">
    <Icon Url="https://demos.telerik.com/aspnet-ajax/button/examples/customicons/images/ePlayer.png"
        HoveredUrl="https://demos.telerik.com/aspnet-ajax/button/examples/customicons/images/eFlash.png"
        PressedUrl="https://demos.telerik.com/aspnet-ajax/button/examples/customicons/images/eTime.png" />
</telerik:RadPushButton>

Font Icons

You can use custom font icons in RadPushButton as well. To do that, follow the steps below:

1. Load the stylesheet with the desired font icons on the page.

   CSS

   <link rel="stylesheet" href="myCustomFontStyleSheet.css" />
   

2. Override the font-family of the button's icon element with the target one (see Example 3).

   CSS

   button.RadButton .rbIcon:before {
       font-family: myCustomFont;
   }
   

3. Set the custom font icon class to the Icon.CssClass property.

   ASP.NET

   <telerik:RadPushButton ID="RadButton1" runat="server" Text="Button With Custom Font Icon">
       <Icon CssClass="myCustomFontIconClass" />
   </telerik:RadPushButton>
   

You can find below an example with Font Awesome Icons.

Figure 3: RadPushButton with Font Awesome icon.

Example 3: Using FontAwesome font icons in RadPushButton.

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

You can also change the font-size and color of the font icon as described in the Fine Tune help article.

Find out more information on how to use Font Awesome icons along with Telerik controls in the 4 Ways to Embed Font Awesome in Telerik UI for ASP.NET AJAX Controls blog post.

See Also

• PushButton - Custom Icons Demo

• Font Awesome Icons

• PushButton - Embedded Icons Demo

• Icons Overview

• Fine Tune Icons Position, Size and Color