Menu Icon Library reference

4 posts, 0 answers
  1. Dmitri
    Dmitri avatar
    13 posts
    Member since:
    May 2011

    Posted 03 Feb 2018 Link to this post

    I am looking at the demo mail app and i noticed that all the menu icons come from the css content: "\e6XX" tag

    Rather than looking through every single one is there somewhere that has a reference of them all?

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4901 posts

    Posted 06 Feb 2018 Link to this post

    Hi Dmitri,

    The closest I can offer is the Kendo Font Icon Library: https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web. The font name WebComponentsIcons matches across both suites and the positions of the glyphs in the font should also match. So, you can either include the Kendo stylesheet and library to use directly those classes and icons, or try to use the page above as a reference guide for creating your own classes with the desired content (see below).

    UI for ASP.NET AJAX suite itself does not come with a font icon library per se. Not all icons have corresponding class names and most controls define the content: "" for icons they need directly. There are two main reasons for that: 1) for legacy reasons, class names had to be preserved and 2) there has been very little demand for such a feature that does not justify the development cost and the breaking change involved.

    Nevertheless, you can try including the fonticon.css file we have, and test the classes listed in it. Usually a <span class="p-icon another-class-from-the-list"></span> should do it. For example:

    <telerik:RadStyleSheetManager runat="server" id="rssm1">
        <StyleSheets>
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Common.fonticons.css" />
        </StyleSheets>
    </telerik:RadStyleSheetManager>
    <span class="p-icon p-i-arrow-45-up-right"></span>

    You can get this file from our source by downloading it from your account. Note that it may change in the future and we do not guarantee backwards compatibility for it, because it is designed for internal use.

    Regards,

    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Vasssek
    Vasssek avatar
    185 posts
    Member since:
    Aug 2010

    Posted 17 Aug 2018 in reply to Marin Bratanov Link to this post

    Hi Marin,

    could you please provide workaround, how to apply kendo ui glyphs to ajax aspx rad button primary icon ?

    https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web#rendering-with-unicode-numbers

    Thank you

    Regards

    Vasssek

  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4901 posts

    Posted 20 Aug 2018 Link to this post

    Hi Vasssek,

    It's the same approach as with applying any other custom font icon: https://docs.telerik.com/devtools/aspnet-ajax/controls/pushbutton/functionality/Icons/custom-icons#font-icons.

    Here's an example, the result is below:

    <asp:ScriptManager runat="server" ID="sm1" />
     
    <span class="k-icon my-custom-icon-class"></span>
     
    <style>
        .my-custom-icon-class:before {
            content: "\e13a"; /* Adds a glyph using the Unicode character number */
        }
    </style>
     
    <telerik:RadButton runat="server" ID="rb1" Text="primary icon with another font" RenderMode="Lightweight">
        <Icon PrimaryIconCssClass="my-custom-icon-class" />
    </telerik:RadButton>

    where you could skip the Kendo registration because the RadButtons already set the font to be the same font and prepare the icon for taking a font icon. The font used in Telerik.Web.UI is shared with Kendo, so there is a good chance that the glyph positions will match (barring version differences).
    Nevertheless, here is an example of adding the kendo shared styles that can also color the span at the top by bringign the font name rules under the k-icon class:


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top