Add Icon API support for glyphicons [#1940604]

The bootstrap theme is distributed with a set of nice glyphs.
To use them we are supposed to insert  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 
2) use jQuery: $('ul.nav > li > a').append('');

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.

Comment	File	Size	Author
#9	Screen Shot 2013-04-23 at 1.32.23 PM.png	47.04 KB	markhalliwell
#9	Screen Shot 2013-04-23 at 1.33.06 PM.png	47.21 KB	markhalliwell
#7	1940604-bootstrap-icon_api-7.patch	6.32 KB	markhalliwell
#7
#1	bootstrap.icons_.png	2.8 KB	Ace Cooper

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #0.0

Ace Cooper CreditAttribution: Ace Cooper commented 12 March 2013 at 13:03

Issue summary:

View changes

minor corrections

Comment #0.1

Ace Cooper CreditAttribution: Ace Cooper commented 12 March 2013 at 13:04

Issue summary:

View changes

more minor editing

Comment #0.2

Ace Cooper CreditAttribution: Ace Cooper commented 12 March 2013 at 14:25

Issue summary:

View changes

topic update

Comment #1

Ace Cooper CreditAttribution: Ace Cooper commented 31 March 2013 at 06:21

Assigned:

Ace Cooper

» Unassigned

File	Size
bootstrap.icons_.png	2.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.

Comment #2

Ace Cooper CreditAttribution: Ace Cooper commented 13 March 2013 at 11:18

Assigned:	Unassigned	» Ace Cooper
Status:	Active	» Needs review

Comment #3

drupizzle CreditAttribution: drupizzle commented 14 March 2013 at 07:56

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

Comment #4

markhalliwell

English

CreditAttribution: markhalliwell commented 20 March 2013 at 17:39

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.

Comment #5

markhalliwell

English

CreditAttribution: markhalliwell commented 20 March 2013 at 17:41

Status:

Needs review

» Active

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

Comment #6

markhalliwell

English

CreditAttribution: markhalliwell commented 20 March 2013 at 18:35

Referencing #1948240: [icon] Request re-purpose/ownership change

Comment #6.0

markhalliwell

English

CreditAttribution: markhalliwell commented 20 March 2013 at 18:35

Issue summary:

View changes

minor spelling

Comment #7

markhalliwell

English

CreditAttribution: markhalliwell commented 1 April 2013 at 04:29

Title:	Using icons (glyphs) from bootsrap distribution	» Add Icon API support for glyphicons
Assigned:	Unassigned	» markhalliwell
Status:	Active	» Needs review

File	Size
1940604-bootstrap-icon_api-7.patch	6.32 KB

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.

Comment #8

markhalliwell

English

CreditAttribution: markhalliwell commented 1 April 2013 at 07:27

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.

Comment #9

markhalliwell

English

CreditAttribution: markhalliwell commented 23 April 2013 at 18:39

File	Size
Screen Shot 2013-04-23 at 1.33.06 PM.png	47.21 KB
Screen Shot 2013-04-23 at 1.32.23 PM.png	47.04 KB

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

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

Comment #10

markhalliwell

English

CreditAttribution: markhalliwell commented 23 April 2013 at 18:43

Status:

Needs work

» Fixed

Fixed with commit 6e981ed

Comment #11

jwilson3

English

Ecuador

CreditAttribution: jwilson3 commented 25 April 2013 at 13:19

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.

Comment #12

markhalliwell

English

CreditAttribution: markhalliwell commented 25 April 2013 at 13:23

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.

Comment #13

jwilson3

English

Ecuador

CreditAttribution: jwilson3 commented 25 April 2013 at 15:04

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

Comment #14

markhalliwell

English

CreditAttribution: markhalliwell commented 29 April 2013 at 08:15

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.

Comment #15

13 May 2013 at 08:20

Status:

Fixed

» Closed (fixed)

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

Comment #16

geodaniel CreditAttribution: geodaniel commented 25 October 2013 at 15:34

I've noticed a minor issue relating to this: #2120479: Icon API support does not work if admin theme is not Bootstrap and fonts not downloaded

Comment #16.0

geodaniel CreditAttribution: geodaniel commented 25 October 2013 at 15:34

Issue summary:

View changes

user -> use

Comment #17

ehsanham CreditAttribution: ehsanham commented 14 June 2014 at 12:18

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 ?

Comment #18

joshuautley CreditAttribution: joshuautley commented 12 August 2015 at 22:15

Would it be possible to port this to Version 3?

-disregard request-

Found out by reading the main page I needed to use this module > https://www.drupal.org/project/icon

Comment #19

jduhls CreditAttribution: jduhls as a volunteer commented 17 May 2016 at 16:19

Issue summary:

View changes

Custom theme hook code if you DIY or just need one in template.php. Replace with glyphicon HTML depending on menu title string:

/**
 * Returns HTML for a menu link and submenu.
 *
 * @param array $variables
 *   An associative array containing:
 *   - element: Structured array data for a menu link.
 *
 * @return string
 *   The constructed HTML.
 *
 * @see theme_menu_link()
 *
 * @ingroup theme_functions
 */
function custom_theme_menu_link__custom_menu(array $variables) {
    if(isset($variables['element']['#title']) && $variables['element']['#title'] == 'User') {
        $variables['element']['#title'] = '<span class="glyphicon glyphicon-user"></span>';
        if(!isset($variables['element']['#localized_options'])) $variables['element']['#localized_options'] = array();
        $variables['element']['#localized_options']['html'] = TRUE;
    }
    return bootstrap_menu_link($variables);
}