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

Menu icons when initializing from a UL

10 Answers 323 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Kenneth
Top achievements
Rank 1
Kenneth asked on 28 Dec 2012, 06:27 PM
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>

10 Answers, 1 is accepted

Sort by
0
Holger
Top achievements
Rank 1
answered on 30 Dec 2012, 04:14 PM
According to the documentation and the demos it seems not possible to add images to menu items in HTML.
0
Kenneth
Top achievements
Rank 1
answered on 30 Dec 2012, 04:21 PM
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.
0
Kamen Bundev
Telerik team
answered on 02 Jan 2013, 08:47 AM
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!
0
Kenneth
Top achievements
Rank 1
answered on 08 Jan 2013, 01:15 AM
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>


0
Kamen Bundev
Telerik team
answered on 08 Jan 2013, 11:21 AM
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!
0
Chris
Top achievements
Rank 1
answered on 10 Dec 2013, 05:21 PM
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
0
Kamen Bundev
Telerik team
answered on 13 Dec 2013, 01:27 PM
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!
0
Simon
Top achievements
Rank 1
answered on 05 Feb 2015, 03:00 AM
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?
0
Iliana Dyankova
Telerik team
answered on 06 Feb 2015, 03:29 PM
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!
 
0
Simon
Top achievements
Rank 1
answered on 06 Feb 2015, 03:44 PM
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.
Tags
Menu
Asked by
Kenneth
Top achievements
Rank 1
Answers by
Holger
Top achievements
Rank 1
Kenneth
Top achievements
Rank 1
Kamen Bundev
Telerik team
Chris
Top achievements
Rank 1
Simon
Top achievements
Rank 1
Iliana Dyankova
Telerik team
Share this question
or