FontAwesome icons in menu items

6 posts, 0 answers
  1. Tonie Venter
    Tonie Venter avatar
    15 posts
    Member since:
    Jan 2006

    Posted 26 Jul Link to this post

    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?

  2. Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 27 Jul Link to this post

    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.
  3. Tonie Venter
    Tonie Venter avatar
    15 posts
    Member since:
    Jan 2006

    Posted 28 Jul in reply to Rumen Link to this post

    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

  4. Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 28 Jul Link to this post

    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.
  5. Tonie Venter
    Tonie Venter avatar
    15 posts
    Member since:
    Jan 2006

    Posted 30 Jul in reply to Rumen Link to this post

    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

  6. Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 31 Jul Link to this post

    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.
Back to Top