Breaking off from #1836160-47: Support icon fonts in menu links:
Posted by dcrocks on April 23, 2013 at 5:32pm:
Took a look. Admit I was confused a little bit because I'm not familiar with the form. But a few comments:
1) I always get confused by drupal's nomenclature. For a menu the 'Title' is actually the anchor Text and 'Description' is the anchor Title Attribute. All the discussions I've seen on iconic menus just refer to placing the icon 'before' the menu item or 'after' it. Maybe that would be more intuitive wording.
2) Where does one place the resources and how are they identified to the code?
3) Are you really providing a wrapper for the anchor text? Isn't it best practice to just place an empty element before or after the text? One of the recommended practices is to add an 'aria-hidden="true"' to the element used to place and style the icon. You don't want that attribute to be applied to the anchor text. The form I see is:
<a href="?"><i class='icon-? icon' aria-hidden="true"></i>text</a>
4) One of my goals was that the basic icon collection(font, sprite, etc) be consistent with other drupal iconic menus, most prominently the toolbar. Do you provide such a collection in your project?
5) How does the icon pick list get built?
Comments
Comment #1
markhalliwellI agree, there is some inconsistency here, however given that the menu add/edit page calls the link text "Menu link title" and the link title "Description" I decided to keep the same wording in the positioning of icon to correlate to the label that already exists.
There is already an extensive API that allows you to define icon bundles via a module or theme using
hook_icon_bundles()
: http://drupalcode.org/project/icon.git/blob/refs/heads/7.x-1.x:/icon.api.php. This allows you to specify where the resources live and what type of render hook to use (ie: single image, sprites, custom withhook_icon_render_hooks()
).The wrapper is optional and disabled by default, hence the checkbox for toggling on and off. I put this in there because I know themers (such as myself) sometimes need the ability to target the icon and text separately in their theme. This would give them the ability to style the text separately from the icon.
As it stands right now, the only icon bundle that's provided with Icon API is the Lullacons: Pack 1 set. The reason for this being: it is GPL licensed. The biggest problem through out the years, in relation to putting icons in core, had been around the topic of licensing. It is extremely difficult to provide core level consistency with icons because very few icon libraries are GPL compliant. I would love for a rich (webfont) icon set to be included with core, but we'd have to make sure it's compatible with Drupal or eventually create our own.
This is automatic, based on modules and themes that provide the proper hooks as defined in my answer to #2.
Comment #2
markhalliwellAlso in regards to
area-hidden="true"
, this has been added so that any render hook will put this in the icon tag being used. In the menu using a bootstrap icon, this is what I get:<a href="/node/2">Menu Item 2<i aria-hidden="true" class="icon icon-film"></i></a>
Comment #2.0
markhalliwellUpdated issue summary.
Comment #2.1
markhalliwellUpdated issue summary.