The bootstrap theme is distributed with a set of nice glyphs.
To use them we are supposed to insert <i class="icon-name"></i> into the menu link titles.
What is the best practice to insert them into Drupal menu links?

I imagine we can achieve this in following ways:
1) use Menu Attributes module to set classes or ids,
then add hook_menu_link_alter into functions.php to insert <i class="icon-' . $css_class . '"></i>
2) use jQuery: $('ul.nav > li > a').append('<i class="icon-' . $css_class . '"></i>');

Please, offer your solutions?

UPD. The discussion at http://drupal.stackexchange.com/questions/24783/advanced-menu-theming-in... looks helpful, but there is no final solution, only API functions pointers.

BTW, many thanks to the developers and maintainers of this wonderful theme.

Comments

Ace Cooper’s picture

Issue summary:View changes

minor corrections

Ace Cooper’s picture

Issue summary:View changes

more minor editing

Ace Cooper’s picture

Issue summary:View changes

topic update

Ace Cooper’s picture

Assigned:Ace Cooper» Unassigned
StatusFileSize
new2.8 KB

Ah, success! I took the following steps:
1. Installed Menu Attributes
2. Set the ID for each menu link as "user", "off", etc (without the "icon-" prefix) at admin/structure/menu/manage/user-menu
See the Bootstrap icons names at http://twitter.github.com/bootstrap/base-css.html#icons
3. Changed the line of function bootstrap_menu_link in /sites/all/themes/bootstrap/includes/menu.inc from:

$output = l($element['#title'], $element['#href'], $element['#localized_options']);

to the following code:

  $item_icon = '';
  if (isset($element['#localized_options']['attributes']['id'])) {
    $item_icon = '<i class="icon-' . $element['#localized_options']['attributes']['id'] . '"></i>';
    $element['#localized_options']['html'] = 'TRUE';
  }
  $output = l($item_icon . $element['#title'], $element['#href'], $element['#localized_options']);

Now you can add a little margin for icons in /sites/all/themes/bootstrap/css/style.css or your custom CSS-file:

[class^="icon-"], [class*=" icon-"] { margin-right: 5px; }

We could improve this approach by using classes or custom attributes (the latter shall require hacking the Menu Attributes module).
Patch will follow after we test out all the ideas. I'm open to suggestions.

P.S. Also found this nice alternative iconset for Bootstrap. Will try it out.

Ace Cooper’s picture

Assigned:Unassigned» Ace Cooper
Status:Active» Needs review
drupizzle’s picture

+1 Ace! I have been working on this today and saw your post which helped complete the puzzle. Success!

markcarver’s picture

If using the packaged glyphicons, then yes you'd have to do the manual implementation mentioned above.

However, this solution is very static. I abandoned glyphicons a while back in favor of Font Awesome and then found Fontello.

This then inspired me to create the http://drupal.org/project/fontello module. I have been working on implementing a solution for menus (similar to how I did the Fontello's block sub-module) where you can pick an icon from the uploaded bundle complete with a preview. This would allow a much easier solution in inserting an icon, I think. When I have a workable commit, I'll post again here.

markcarver’s picture

Status:Needs review» Active

Changing the status as there's actually no patch to review.

markcarver’s picture

markcarver’s picture

Issue summary:View changes

minor spelling

markcarver’s picture

Title:Using icons (glyphs) from bootsrap distribution» Add Icon API support for glyphicons
Assigned:Unassigned» markcarver
Status:Active» Needs review
StatusFileSize
new6.32 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Here is the initial patch for adding glyphicon support via the Icon API. Granted the API doesn't yet have menu item support (just block support at the moment), but it's on the @todo list. This gets the Bootstrap theme half way there though.

markcarver’s picture

Status:Needs review» Needs work

As brought to my attention and to clarify, this is "technically" a work in progress. I provided this patch so that as work progresses with the Icon API, it can be tested with Bootstrap. Until then, please use Ace's implementation in #1.

markcarver’s picture

I just finished implementing the icon_menu submodule for Icon API. With this patch, it will now allow you to be able to insert the default Bootstrap icons into a menu link.

Screen Shot 2013-04-23 at 1.32.23 PM.pngScreen Shot 2013-04-23 at 1.33.06 PM.png

markcarver’s picture

Status:Needs work» Fixed

Fixed with commit 6e981ed

jwilson3’s picture

Do you really need to show the html markup around the tag name in the Title Wrapper Element select box? Views lets you select the wrapper element, but does not include the "<" and the "/>". Please note also, that from a UX perspective select lists with items that have "<" and ">" to the left and right of them typically denote the default unselected option such as <None> or <Choose an item>.

Dunno, just a suggestion cause this jumped out at me. Otherwise, this is really shaping up nicely. Congrats.... hoping this API could maybe be used to be able to upload real images for the "icons" (a la menu_icons module). The form looks surprisingly similar.

markcarver’s picture

Ah, good catch. I can be a little literal sometimes lol I just took it out (which is technically in the Icon API, would love your input over there).

In regards to custom icons, that's one of the goals. To provide a "custom" provider that lets you upload individual images to a single icon bundle. There is a LOT of work that I've done just in the past day or so since I committed this patch.

This issue was more for allowing Bootstrap to integrate with Icon API and allow native (albeit inferior) support for the glyphicons that are packaged with Bootstrap.

jwilson3’s picture

Yep, just created #1979704: Integrate with Menu_Icons module for ya ;)

markcarver’s picture

Icon API - 7.x-1.0-beta1 has been released.
Fontello - 7.x-1.0-beta4 has been released.

Bootstrap icons are now natively supported in Icon API. They also work together with Fontello, so you can have both if desired.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

geodaniel’s picture

geodaniel’s picture

Issue summary:View changes

user -> use

ehsanham’s picture

hello,i create a new icon.inc in the icon modules folder ,and paste your code in it ,
but i cannot see the bootstrap in the icon confiquration files,
would you plz help me ?