Using Font Awesome Icons with RadButton

PROJECT DESCRIPTION

The sample project attached with this post shows how you can use Font Awesome Icons in your Telerik ASP.NET application within the RadButton control. These icons work equally well on mobile as well as non-mobile devices when used in RadButton control. You can make your Telerik ASP.Net app look more appealing by following this sample and also make it easier for the users of your app to better understand the user interface of your Telerik ASP.Net app. Icons make it easy for end-users to understand the user interface of an application. You can see a screen shot of these icons when used with RadButton at this URL: http://screencast.com/t/hhfQlm4AvaG

INTRODUCTION

Font Awesome Icons are very popular nowadays in all types of web application. They offer a huge variety of different icons  that are constantly being expanded/upgraded and most important they are free to use in any commercial application i.e. no licensing cost is associated with them.  One cool feature of these icons is that you can style them with CSS just like you would style any font in your application i.e. you can use CSS attributes of color or font-size or font-weight to change the look-and-feel of these icons. They can also be enlarged by simply using a CSS class without any loss of icon quality, which is also one of the reasons that these icons have become so popular. You can read more about the benefits of these icons at following URL: https://fortawesome.github.io/Font-Awesome/.

DEMO 

For an online demo of using Font Awesome Icons in RadButton control you can view it at this URL: Demo for using Font Awesome Icons in RadButton control

SETUP of Telerik ASP.Net project

To start using Font Awesome Icons in your Telerik ASP.Net app, you need to follow the steps mentioned below. Its assumed that you have added references to Telerik.Web.UI.dll and Telerik.Web.UI.Skins.dll your ASP.Net project before doing the steps below.

• In the web config of your app, add the following configuration to system.web server section. You need this so IIS can serve files with an extension of woff or woff2, which is the extension of Font Awesome Icon files. If you do not include this configuration then you will get 404 Not Found errors when you try to use these icons in an ASP.Net page.
  <system.webServer>

        <staticContent>

        <!--Below static content configuration is needed else you will get 404 Not Found errors when using font awesome icons-->

        <remove fileExtension=".woff" />

        <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />

        <remove fileExtension=".woff2" />

        <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />

      </staticContent>

  </system.webServer>
• Create a folder fontsawesome under the root of your ASP.Net app and copy the contents of this folder from attached sample project to this folder. Or you can simply copy this folder in attached sample and paste it to the root of your app in Visual Studio solution explorer. 
• Finally, you need to include the CSS file for these icons either in the master page or in any content page. For this you can use either of the following 2 approaches:
  • Use the CSS file found in the attached sample project at this location /fontsawesome/css/font-awesome.css. There is also a minified version of this CSS file at same location in attached sample. Include this file in the head part of your ASP.Net master/content page. 
    <link type="text/css" rel="stylesheet" href="fontsawesome/css/font-awesome.css" />
  • Use the CSS file from a CDN (Content Delivery Network) as in code snippet below.  Include this code in the head part of the master/content page. If you use this approach then  you don't need to do the other steps in the setup i.e. no need to create a special folder of fontsawesome in your project or to create special configuration for woff/woff2 files in web config file..
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

 HOW TO USE FONT AWSOME ICONS IN RADBUTTON

1. After the above steps you are all set to start using Font Awesome Icons. An example of including this icon is as below. Note that you need to mention the icon using i tags within the ContentTemplate of RadButton. i tags are specific to Font Awesome Icons. The classes you can use for styling are: fa-lg (33% enlargement), fa-2x, fa-3x,fa-4 and fa-5x; if you don't specify a size class then the original default size of the icon is displayed which is a normal small size. You can also size the icon by simply setting the font-size attribute to an appropriate value under the style for the i tag. One thing to note is that only the text you mention in ContentTemplate is displayed, and the Text property of RadButton is ignored when using these icons. If you do no mention any text within ContentTemplate then the RadButton shows up without any text but only the icon, which can be a suitable option in many cases.

2. You can also show multiple icons in  same RadButton as in code snippet below.

3.  You can style these icons just as you would any font. In above code snippet you can see how the filter icon is made to show in steelblue color with a font size of 27px.

4. You can show animated icons in RadButton using code like below. The classes of fa-spin and fa-pulse cause an icon to become animated.

5. You can dynamically change the RadButton icon either on client-side or on server-side. Look at RadButton3 for doing this on server-side and RadButton4 for doing it on client-side in attached sample page of  RadButtonWithFontAwesome.aspx.

6. You can also enclose an icon within another shape icon to give an enhanced effect. For instance you can show a printer icon within a rounded square shape icon. These examples can be seen with RadButton10, RadButton11, RadButton12, RadButton13, RadButton14 and RadButton15 in attached sample page of  RadButtonWithFontAwesome.aspx.

7. These icons are mobile friendly which you can verify by going to the online demo URL in your mobile device.

8. These icons are compatible with all Telerik ASP.Net AJAX skins which you can see in the online demo. The mouse over effects of Telerik skins will apply to Font Awesome Icons.