Menu icons when initializing from a UL

11 posts, 0 answers
  1. Kenneth
    Kenneth avatar
    70 posts
    Member since:
    Feb 2008

    Posted 28 Dec 2012 Link to this post

    I have an existing menu that is initialized from a UL element. I would like to be able to add icons to some of the menu items - but don't see a way to code that in the UL/LI items. I've tried several different methods - but no luck. Basically - I was hoping something like this would work:

    <ul>
    <li><span class="k-icon k-i-custom"></span>One</li>
    <li>Two</li>
    </ul>
  2.
  3. Holger
    Holger avatar
    78 posts
    Member since:
    Nov 2012

    Posted 30 Dec 2012 Link to this post

    According to the documentation and the demos it seems not possible to add images to menu items in HTML.
  5. Kenneth
    Kenneth avatar
    70 posts
    Member since:
    Feb 2008

    Posted 30 Dec 2012 Link to this post

    Yes. I noticed that. There must be an undocumented way to do it. Could probably pull apart the generated HTML, after initializing a menu from JSON and figure it out. Just thought someone else may have already done that.

    I suppose I could switch to generating the menu from JSON, but there were other complications.
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 02 Jan 2013 Link to this post

    Hi,

    Well, actually you can add icons through static HTML if you use the .k-sprite CSS class for the icon (Kendo Menu adds this class to the sprite when it is built dynamically). This should work:
    <ul id="menu">
        <li>
            <span class="k-sprite icon-class"></span>Text with Sprite
        </li>
    </ul>
    <script>
        $(document).ready(function() {
            $("#menu").kendoMenu();
        });
    </script>

    I'll make sure that this information is added to the documentation.

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Kenneth
    Kenneth avatar
    70 posts
    Member since:
    Feb 2008

    Posted 07 Jan 2013 Link to this post

    I tried this (in a functioning menu) - but no icon appears. What might I be doing incorrectly?

    <li><span class="k-sprite k-i-refresh"></span>Refresh</li>


  11. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 08 Jan 2013 Link to this post

    Hello Kenneth,

    The k-sprite class doesn't have the k-icon background-image set, thus nothing is rendered (k-sprite is meant to be used with custom images). However, if you add the k-icon class, the element will get removed by the arrow init (which uses k-icon to find the arrow). I'll change this for the next release, but meanwhile you can use k-tool-icon instead, like this:
    <li><span class="k-sprite k-tool-icon k-i-refresh"></span>Refresh</li>

    Greetings,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Chris
    Chris avatar
    25 posts
    Member since:
    Apr 2011

    Posted 10 Dec 2013 Link to this post

    Sorry to be bringing back to life an old thread but any reason why not all the icons work this way?  For example, arrowheads don't work, see my fiddle.  Any reason why this doesn't work?  Anything I can do to make them work?

    Thanks
  14.
  15. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 13 Dec 2013 Link to this post

    Hello Kenneth,

    Thank you for noticing this. It is indeed a bug in the Kendo UI Menu icon handling. I've just fixed it and the fix will be available with the next internal build. I've also updated your points for the find.

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. Simon
    Simon avatar
    166 posts
    Member since:
    Sep 2010

    Posted 04 Feb 2015 Link to this post

    It's been a year since the last post in this topic and I don't see any limitation regarding the icon / sprite in the documentation.

    Was it fixed since?
  19. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 06 Feb 2015 Link to this post

    Hi Simon,

    The issue which Kamen mentioned has been already addressed - take a look at this example.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  20.
  21. Simon
    Simon avatar
    166 posts
    Member since:
    Sep 2010

    Posted 06 Feb 2015 in reply to Iliana Nikolova Link to this post

    Thank you Iliana,

    I've noticed this new feature so I just wanted to make sure it was officially supported.  This is great since this feature also offer a good alternative to another question of mine about the append method.  If we can create a menu item with an image using a DOM element (versus an html string), we are able to get the reference to that item before the append method call.
Back to Top