This is a migrated thread and some comments may be shown as answers.

FontAwesome icons in menu items

5 Answers 723 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Tonie Venter
Top achievements
Rank 1
Tonie Venter asked on 27 Jul 2017, 02:11 AM

Is there any support to use the FontAwesome icons in the menus?

It looks like it might be possible to use templates to do this. I am creating the menus and items with code and cannot find good information about how to approach this. Is there anyone with a working implementation of FontAwesome icons?

5 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 27 Jul 2017, 04:09 PM
Hi,

You can choose between one of the following two approaches in order to use "Fontawesome" icons in RadMenu:

  • Apply fonts by using sprite image feature of the RadMenu
  • OR apply FontAwesome class names to RadMenu items and then assign the chosen chars to the assigned classes:

    <telerik:RadMenu runat="server" EnableImageSprites="true" RenderMode="Lightweight">
        <Items>
            <telerik:RadMenuItem Text="Item 1" CssClass="fa fa-shopping-bag item1" />
            <telerik:RadMenuItem Text="Item 2" CssClass="item2" />
            <telerik:RadMenuItem Text="Item 3" CssClass="item3" />
        </Items>
    </telerik:RadMenu>

    <style>
    .rmItem.fa {
        font: inherit;
    }
       
    .rmItem.fa:before {
        font: normal normal normal 14px/1 FontAwesome;
        position: absolute;
        left: 8px;
        top: 3px;
        z-index: 1;
    }
    </style>

For convenience, I am attaching a sample project demonstrating the first approach, so you can examine it on your side.
 
Best regards,
Rumen
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tonie Venter
Top achievements
Rank 1
answered on 28 Jul 2017, 05:14 AM

Rumen,

Thanks for the reply, I tried both approaches and eventually implemented the second one as it would be a simpler implementation for us. I still have a small issue to get it to set the correct color for the icons E.g 'text-primary' .

I have tried to do it in the standard way to add it to the css property E.g: CssClass="fa fa-shopping-bag text-primary" but it does not seem to work. I have added the font color to the style declaration as a workaround but do not have the ability to set the individual icons to different colors or to disabled state.

.rmItem.fa:before {
    font: normal normal normal 14px/1 FontAwesome;
position: absolute;
left: 8px;
top: 5px;
z-index: 1;
color: #158cba; /* this is the color for 'text-primary'  */
}

Thanks again for the help!

 

Regards

 

Tonie

0
Rumen
Telerik team
answered on 28 Jul 2017, 08:49 AM
Hello Tonie,

Try to apply the color through the rmLeftImage built-in class:

        .rmLeftImage {
            color: red ;
        }

Regards,
Rumen
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tonie Venter
Top achievements
Rank 1
answered on 30 Jul 2017, 11:54 PM

HI Rumen

Thanks again for your replies

Next issue would be to do the same for the RadTreeView icons.

I need to set the node image on each node with code, as I use different icons depending on the actual node type:

node.ImageUrl = "~/img/icons/treeicons/closed.gif";
node.ExpandedImageUrl = "~/img/icons/treeicons/open.gif";

What would be a good approach to achieve the same with FontAwesome?

My current workaround is to just add the icons to the node text. This seems to work OK but node editing has to be handled in a special way. Let me know if there is a better solution.

Kind regards

Tonie

0
Rumen
Telerik team
answered on 31 Jul 2017, 08:17 AM
Hi Tonie,

You should override the CSS content and font-family properties of the :before elements that render the treeview icons. 

Here you are a Stackoverflow thread that addresses this topic—http://stackoverflow.com/questions/20782368/use-font-awesome-icon-as-css-content. And for the unicode characters you can refer to this sheet—http://astronautweb.co/snippet/font-awesome/.

Here you are a simple example that you can follow: 

  
<style>
    .RadTreeView span.rtMinus::before {
        font-family: FontAwesome;
        content: "\f055";
        font-size: 0.7em;
    }
  
    .RadTreeView span.rtPlus::before {
        font-family: FontAwesome;
        content: "\f056";
        font-size: 0.7em;
    }
</style>
  
<telerik:RadTreeView runat="server" RenderMode="Lightweight">
    <Nodes>
        <telerik:RadTreeNode Text="Item 1">
            <Nodes>
                <telerik:RadTreeNode Text="Item 1 1">
                    <Nodes>
                        <telerik:RadTreeNode Text="Item 1 1 1" />
                        <telerik:RadTreeNode Text="Item 1 1 2" />
                        <telerik:RadTreeNode Text="Item 1 1 3" />
                        <telerik:RadTreeNode Text="Item 1 1 4" />
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Item 1 2" />
                <telerik:RadTreeNode Text="Item 1 3" />
                <telerik:RadTreeNode Text="Item 1 4" />
            </Nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode Text="Item 2">
            <Nodes>
                <telerik:RadTreeNode Text="Item 2 1" />
                <telerik:RadTreeNode Text="Item 2 2" />
                <telerik:RadTreeNode Text="Item 2 3" />
                <telerik:RadTreeNode Text="Item 2 4" />
            </Nodes>
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>


Best regards,
Rumen
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Menu
Asked by
Tonie Venter
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Tonie Venter
Top achievements
Rank 1
Share this question
or