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.
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 |
#1 | bootstrap.icons_.png | 2.8 KB | Ace Cooper |
Comments
Comment #0.0
Ace Cooper CreditAttribution: Ace Cooper commentedminor corrections
Comment #0.1
Ace Cooper CreditAttribution: Ace Cooper commentedmore minor editing
Comment #0.2
Ace Cooper CreditAttribution: Ace Cooper commentedtopic update
Comment #1
Ace Cooper CreditAttribution: Ace Cooper commentedAh, 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:to the following code:
Now you can add a little margin for icons in
/sites/all/themes/bootstrap/css/style.css
or your custom CSS-file: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 commentedComment #3
drupizzle CreditAttribution: drupizzle commented+1 Ace! I have been working on this today and saw your post which helped complete the puzzle. Success!
Comment #4
markhalliwellIf 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
markhalliwellChanging the status as there's actually no patch to review.
Comment #6
markhalliwellReferencing #1948240: [icon] Request re-purpose/ownership change
Comment #6.0
markhalliwellminor spelling
Comment #7
markhalliwellHere 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
markhalliwellAs 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
markhalliwellI 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.
Comment #10
markhalliwellFixed with commit 6e981ed
Comment #11
jwilson3Do 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
markhalliwellAh, 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
jwilson3Yep, just created #1979704: Integrate with Menu_Icons module for ya ;)
Comment #14
markhalliwellIcon 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 #16
geodaniel CreditAttribution: geodaniel commentedI'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 commenteduser -> use
Comment #17
ehsanham CreditAttribution: ehsanham commentedhello,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 commentedWould 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 commentedCustom theme hook code if you DIY or just need one in template.php. Replace with glyphicon HTML depending on menu title string: