FontAwesome icons in menu items

[Tonie Venter]

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?

[Rumen]

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

[Tonie Venter]

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

[Rumen]

Hello Tonie,

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

        .rmLeftImage {
            color: red ;
        }

Regards,
Rumen
Progress Telerik

[Tonie Venter]

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

[Rumen]

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: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<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