Using Font Awesome Icons in RadTabStrip Tabs

Thread is closed for posting
6 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 12 Sep 2018 Link to this post

    Requirements

    Telerik Product and Version

    		 3.5+

    Supported Browsers and Platforms

    		 All browsers supported by Telerik UI for ASP .NET AJAX

    Components/Widgets used (JS frameworks, etc.)

    		 ASP.NET, JavaScript, C#, VB


    PROJECT DESCRIPTION 

    This sample demonstrates three different ways of including Font Awesome Icons into the RadTabStrip Tabs:

    1. Using Templates 
    2. Using Client-side logic
    3. Using Server-side logic

     

    Templates

    The code for the Font Awesome Icon can be included in a TabTemplate inside the RadTab tag 

    <telerik:RadTab Text="Home" Selected="true">
        <TabTemplate>
            <i class="fas fa-home"></i> Home
        </TabTemplate>
    </telerik:RadTab>


    Client-Side

    The logic for setting the Font Awesome Icon should be executed in the OnClientLoad event handler.

    <script type="text/javascript">
        function tabsClientLoad(sender, args) {
            for (var i = 0; i < sender.get_tabs()._array.length; i++) {
                var tab = sender.get_tabs()._array[i];
                var fontClass;
     
                switch (tab.get_value()) {
                    case "Home":
                        fontClass = "fas fa-home";
                        break;
                    case "About":
                        fontClass = "fas fa-info-circle";
                        break;
                    case "Contact":
                        fontClass = "fas fa-phone";
                        break;
                 }
                var span = $(tab.get_element()).find('.rtsTxt');
                span.html("<i class=\"" + fontClass + "\"></i>" +  span.html());
            }
        }
    </script>


    Server-Side

    Note that the TabDataBound event is fired only when the Tabs are created dynamically. You can find more information in the TabDataBound help article.

    Insert the Font Icon before the Text using the following approach:

    protected void RadTabStrip1_TabDataBound(object sender, Telerik.Web.UI.RadTabStripEventArgs e)
    {
        switch (e.Tab.Value)
        {
            case "Home":
                e.Tab.Text = "<i class=\"fas fa-home\"></i> " + e.Tab.Text;
                break;
            case "About":
                e.Tab.Text = "<i class=\"fas fas fa-info-circle\"></i> " + e.Tab.Text;
                break;
            case "Contact":
                e.Tab.Text = "<i class=\"fas fa-phone\"></i> " + e.Tab.Text;
                break;
        }
    }
  3. C93B95EE-355C-4F89-8B9B-6939828C3673
    C93B95EE-355C-4F89-8B9B-6939828C3673 avatar
    14 posts
    Member since:
    Nov 2016

    Posted 18 May 2019 Link to this post

    I am using the template method. But when I click the mouse on a tab, nothing happens.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>


    <html>
    <head runat="server">
        <title>Hot Sauce, Pickles, Networks and Cybersecurity</title>
        <meta name="theme-color" content="#000000">
        <%--<link href="Shtoyles/defaultShtoyle.css" rel="stylesheet" />--%>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="FA572/css/all.min.css" rel="stylesheet" />
        <script src="FA572/js/all.min.js"></script>
    </head>
    <body style="margin: 0px; padding: 0px; background-color: #0082cc">
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server" ID="RadScriptManager2" />
            <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="BlackMetroTouch" />
            <div class="demo-container no-bg">
                <telerik:RadTabStrip RenderMode="Mobile" runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" Skin="BlackMetroTouch">
                    <Tabs>
                        <telerik:RadTab Text="Sauce" Width="33%" PageViewID="RadPageView1" Selected="true" style="text-align:center">
                            <TabTemplate>
                                <i class="far fa-pepper-hot fa-2x"></i>
                            </TabTemplate>
                        </telerik:RadTab>
                        <telerik:RadTab Text="Network" Width="33%" PageViewID="RadPageView2" style="text-align:center">
                            <TabTemplate>
                                <i class="far fa-network-wired fa-2x"></i>
                            </TabTemplate>
                        </telerik:RadTab>
                        <telerik:RadTab Text="" Width="34%" PageViewID="RadPageView3" style="text-align:center">
                            <TabTemplate>
                                <i class="far fa-user-shield fa-2x"></i>
                            </TabTemplate>
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage ID="RadMultiPage1" runat="server" RenderMode="Mobile">
                    <telerik:RadPageView ID="RadPageView1" runat="server" Selected="true">Sauce</telerik:RadPageView>
                    <telerik:RadPageView ID="RadPageView2" runat="server">Networks</telerik:RadPageView>
                    <telerik:RadPageView ID="RadPageView3" runat="server">Cybersecurity</telerik:RadPageView>
                </telerik:RadMultiPage>
            </div>
        </form>
    </body>
    </html>

  5. C93B95EE-355C-4F89-8B9B-6939828C3673
    C93B95EE-355C-4F89-8B9B-6939828C3673 avatar
    14 posts
    Member since:
    Nov 2016

    Posted 18 May 2019 in reply to C93B95EE-355C-4F89-8B9B-6939828C3673 Link to this post

    If I take the template and font awesome out, then the tabs work.
  7. C93B95EE-355C-4F89-8B9B-6939828C3673
    C93B95EE-355C-4F89-8B9B-6939828C3673 avatar
    14 posts
    Member since:
    Nov 2016

    Posted 18 May 2019 in reply to C93B95EE-355C-4F89-8B9B-6939828C3673 Link to this post

    Can't find a way to edit posts, so I am replying. Anyway, I am using FA 5.7.2
  9. C93B95EE-355C-4F89-8B9B-6939828C3673
    C93B95EE-355C-4F89-8B9B-6939828C3673 avatar
    14 posts
    Member since:
    Nov 2016

    Posted 18 May 2019 in reply to C93B95EE-355C-4F89-8B9B-6939828C3673 Link to this post

    I tried it with FA 4x and it works. FA4x doesn't use the Font Awesome JS. So perhaps there is a conflict with that JavaScript.
  11. C93B95EE-355C-4F89-8B9B-6939828C3673
    C93B95EE-355C-4F89-8B9B-6939828C3673 avatar
    14 posts
    Member since:
    Nov 2016

    Posted 18 May 2019 in reply to C93B95EE-355C-4F89-8B9B-6939828C3673 Link to this post

    Fixed it. Sorry for all the posts. You can delete all these. It would be helpful to edit replies, though
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.