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

markhalliwell’s picture

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.

I 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.

2) Where does one place the resources and how are they identified to the code?

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 with hook_icon_render_hooks()).

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>

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.

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?

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.

5) How does the icon pick list get built?

This is automatic, based on modules and themes that provide the proper hooks as defined in my answer to #2.

markhalliwell’s picture

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:

Also 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>

markhalliwell’s picture

Issue summary: View changes

Updated issue summary.

markhalliwell’s picture

Issue summary: View changes

Updated issue summary.