Learn how to apply Font Awesome icons to some of the Telerik UI for ASP.NET AJAX controls.
In this post we will demonstrate how to use one of the most popular font icons library together with the components of Telerik UI for ASP.NET AJAX suite in Lightweight Render Mode. We'll answer the following questions:
Don’t worry, it is easy, and I will help you find these answers by demonstrating four different use cases with four different Telerik Web Forms controls.
The pallet of built-in styles coming with RadControls is rich and can satisfy almost every expectation for aesthetics. As it is expected font icons are part of all that.
Font Awesome is indeed Awesome! The popularity of the Font Awesome Icons is continuously increasing. Recently we have received several questions on how the awesome glyphs can be used in AJAX Controls. That prompted us to create this post.
To avoid making this post extremely long I have picked four scenarios with RadControls that we have been recently asked about. We will demonstrate the integration of Font Awesome in the Telerik AJAX components: Button, Label, Menu and Grid.
Include FontAwesome on the page. You can find a detailed explanation of how to do that in the following link: Get started with FontAwesome.
With all the samples below, we will take benefit of the easiest approach—a CDN powered kit code. So just get a personal kit and place it in the head tag.
Quick check in the Network tab of the DevTools to see if the kit is working and we have Font Awesome loaded on the page.
In case you are not aware of how to use the Browser’s Developer Tools (F12) to inspect the HTML of the page, the applied styles, check out the Improve Your Debugging Skills with Chrome DevTools blog post before we go on.
Let’s start with the most intuitive way to introduce the icons in generic HTML structure—the ‘Basic use.’ All you need to know about this approach is well described in Font Awesome - Basic Use. In summary, the Basic use of Font Awesome acts for assigning predefined CSS classes to HTML elements. Each font-icon can be placed by setting the respective CSS class:
As for the RadButton, the ContentTemplate allows us to include HTML elements inside the control, so it would let us take benefit from the Font Awesome basic usage.
Markup declaration of the RadButton:
Result in the browser:
This is just one way to do it. You can find more details about the integration FontAwesome in RadButton in Using Font Awesome Icons with RadButton.
This is a pretty convenient way, but it is only applicable for some of the Telerik controls due to the fact that the
CssClass property normally applies to the wrapper element of the control.
Note: Have in mind that by default the embedded Telerik skins will be loaded as last references in the
<head> tag and will override the font-family coming with the Font Awesome kit. As a result the desired font icon will not be applied. To avoid that we can set the
EnableEmbeddedSkins property of the RadControl to false and let Font Awesome styles take effect.
Alternatively, you can keep the embedded skins but ensure the Font Awesome styles are loaded after the Telerik ones by placing the script tag with the kit code in the end of the
<body> instead of in the
In some scenarios the basic approach is not applicable due to the HTML structure rendered by some of the more complex Telerik Controls. Then the advanced approach for including Font Awesome comes in handy. It is well described here: Font Awesome - CSS Pseudo-elements.
Note: Both basic and advanced approaches practically lead to the same result—CSS applying font settings and content value.
With the basic approach the font icons are loaded as Font Awesome resources and we only need to use the correct predefined Class name. In the Advanced approach we need to write our CSS rules. Check out the styles applied automatically to the RadLabel in the screenshot from the previous section.
Let’s bring in a font-icon in one MenuItem inside a RadMenu.
We can use the
CssClass property to set a custom class name which will help us apply the icon to the desired item only.
In the browser, use the DevTools to define which DOM element needs to be styled. We would need a specific enough selector to ensure that our custom CSS will take effect and will apply on the desired items only.
CSS to bring in the font-icon:
The embedded font-icons in Telerik controls are placed in the
::before pseudo element. In order to replace them with Font Awesome icons we need to ensure that we apply custom CSS with selectors ‘strong’ enough to override the built-in icon.
First, we need to define the HTML element containing the embedded icon and then to use proper CSS selectors to overrule the default appearance.
Inspect the Embedded icon and define the selectors:
We can perform a live change using the Developer Tools to find the best fit:
Once we know it, we can apply it on the page with a few lines of CSS:
By using the pseudo-elements and the approach above we can style embedded font icons in any Telerik control. You can find more about styling RadGrid buttons in Using Font Awesome in RadGrid buttons.
Note: The font-icons are part of the font family so we can modify their font-size and color just like it is done with the regular text.
Font Awesome is awesome and provides a nice way to place one icon over another to achieve a more complex meaningful icon.
We use the stacked icons inside a RadButton:
Here is how we achieved the Button demonstrated above:
Find more about Stacked Icons in the following link: Font Awesome - Stacked Icons
If this is not enough for you, check out what can be achieved with SVG + JS version of Font Awesome: Layering, Text and Counters.
We have picked some of the most common scenarios for integrating Font Awesome in Telerik AJAX Controls. However, the AJAX suite contains of more than 120 different controls. So if you want to use font-icons with an AJAX control which is not mentioned in the blog post, use the comments section below or submit a ticket to the Telerik Support Team!
If you're interested in trying out Telerik UI for ASP.NET AJAX, you can download its fully functional trial from the link below:
Doncho Milkov was a Technical Support Officer working with the Progress Telerik UI for ASP.NET AJAX components.
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required