Changes between Initial Version and Version 5 of Ticket #16699


Ignore:
Timestamp:
Feb 11, 2013, 11:34:23 PM (7 years ago)
Author:
bill
Comment:

Ah I did miss the fiddle, and didn't realize you were trying to demonstrate a fix to the problem.

OK, so the issue is that FontAwesome is using fonts to display the icon, whereas Menu (and the rest of dijit) is expecting a CSS class that sets background-image. I haven't seen this font technique before. It's interesting, although presumably not portable to older browsers?

Anyway, in general some dijit widgets are using <img> for icons rather than <div> or <span> because the <img> element has a natural inline-block styling. But probably (as you thought) Menu can be changed to use a <div> or <span>.

I don't have any suggested workaround besides overriding MenuItem's template.

Legend:

Unmodified
Added
Removed
Modified
  • Ticket #16699

    • Property Status changed from new to assigned
    • Property Milestone changed from tbd to 1.9
    • Property Summary changed from [dijit/MenuItem][cla] Font-Awesome not working as iconClass in MenuItem to Menu: Font-Awesome not working as iconClass
  • Ticket #16699 – Description

    initial v5  
    11I am using http://fortawesome.github.com/Font-Awesome/ in Dijit buttons and toolbars. It works perfectly.
    22
    3 But there is problem in MenuItem and CheckedMenuItem widgets because it uses IMG tag.
     3But there is problem in !MenuItem and !CheckedMenuItem widgets because it uses IMG tag.
    44
    55I am not sure what impact it has on the whole Menu suite to replace IMG tag, but I created dirty hack to replace IMG with DIV and seams to work: http://jsfiddle.net/bigm/x52ZF/
    66
    7 Please, could somebody suggest solution which would work directly in MenuItem.js/MenuItem.html ?
     7Please, could somebody suggest solution which would work directly in !MenuItem.js/!MenuItem.html ?