Telerik blogs
DotNetT2 Dark_1200x303

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:

  • How to add third party font icons inside the Telerik Controls?
  • How to replace the embedded icons with external ones?

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.

Font Awesome logo

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.

The plan:

  1. Get ready by referencing Font Awesome on the page
  2. Basic usage of FontAwesome inside a RadButton with content template
  3. Leverage the CssClass property to bring in font icon in RadLabel
  4. Introduce Font Awesome icon in RadMenu using the pseudo elements
  5. Use the pseudo-elements to change the built-in icons in command buttons in RadGrid
  6. Bonus case: Stacked Icons in RadButon

Get Ready

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.

<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://kit.fontawesome.com/xxxxxxxxxx.js"></script>
</head>

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.

DevTools Network tab

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.

Basic Usage of FontAwesome Inside a RadButton with Content Template

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:

<i class="fas fa-[Name]"></i>

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:

<telerik:RadButton ID="RadButton1" runat="server" Text="RadButton">
    <ContentTemplate>
        <i class="fas fa-power-off"></i>
    </ContentTemplate>
</telerik:RadButton>

Result in the browser:

pic2_RadButton

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.

Leverage the CssClass Property to Bring in Font Icon in RadLabel

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

Markup:

<telerik:RadLabel ID="RadLabel2" runat="server" Text="RadLabel" EnableEmbeddedSkins="false" CssClass="fas fa-smile-wink"></telerik:RadLabel>

Result:

pic3_RadLabelCheck

Introduce Font Awesome Icon in RadMenu Using the Pseudo Elements

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.

Declaration:

<telerik:RadMenu ID="RadMenu1" runat="server">
    <Items>
        <telerik:RadMenuItem Text=" bag" CssClass="shoppingBag" />
        <telerik:RadMenuItem Text="Item 2" CssClass="item2" />
        <telerik:RadMenuItem Text="Item 3" CssClass="item3" />
    </Items>
</telerik:RadMenu>

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.

pic4_MenuSelector

CSS to bring in the font-icon:

.RadMenu .shoppingBag > .rmLink.rmRootLink {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.RadMenu .shoppingBag > .rmLink.rmRootLink:before {
    content: "\f290";
}

Achieved appearance:

pic5_RadMenuResult

Use the pseudo-elements to Change the Built-in Icons in Command Buttons in RadGrid

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:

pic6_RadGrid_InspectIcon

We can perform a live change using the Developer Tools to find the best fit:

pic7_RadGridLiveCheck

Once we know it, we can apply it on the page with a few lines of CSS:

.RadGrid .t-font-icon.rgIcon.rgDelIcon:before {
    font-family: "Font Awesome 5 Free";
    content: "\f044";
}

Result:

pic8_RadGridStyled

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.

Stacked Icons in RadButton

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:

Font Awesome Stacked icons

Here is how we achieved the Button demonstrated above:

<style>
    .hidden{
        display:none;
    }
 
    .fa-stack .cornered-tr {
        position: absolute;
        top: 0px !important;
        text-align: right;
        line-height: 1em;
        text-shadow: 1px 1px 1px #000;
    }
</style>
 
<script>
    function onClientClicked(sender, args) {
        var checkIcon = $('.checkIcon');
        checkIcon.toggleClass("hidden");
    }
</script>
 
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="onClientClicked">
    <ContentTemplate>
        <span class="fa-stack fa-lg">
            <i class="far fa-user fa-stack-2x"></i>
            <i class="fas fa-check fa-stack-1x cornered-tr checkIcon hidden" style="color: lightgreen"></i>
       </span>
    </ContentTemplate>
</telerik:RadButton>

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:

Start Free Trial


Doncho Milkov
About the Author

Doncho Milkov

Doncho Milkov was a Technical Support Officer working with the Progress Telerik UI for ASP.NET AJAX components.

Related Posts

Comments

Comments are disabled in preview mode.