Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By lacliniquemtl on
I wrote a snippet of code that allow me to replace dynamically a menu link with an icon, useful for dashboard type menu.
This trick use the Menu Attribute module and the Font-Awesome library - but it could also use any css based icon library.
Here I am sharing this snippet of code with you, but if you have an idea on how to improve it, please do not hesitate:
function THEME_menu_link(array $variables) {
$element = $variables['element'];
$sub_menu = '';
$output = l($element['#title'], $element['#href'], $element['#localized_options']);
if (isset($element['#original_link']['options']['attributes']['class'])) {
$array_class = $element['#original_link']['options']['attributes']['class'];
$count = count($array_class);
for ($i=0; $i <= $count; $i++){
if (substr($array_class[$i], 0, 5) == 'icon-' ){ // icon- is the prefix of all the icon classes
return '<li' . drupal_attributes($element['#attributes']) . '><a href=""><i class="' . $array_class[$i] . '"></i></a></li>' . "\n";
}
}
}
}
- With the Menu Attribute module, assign the class of the icon that you need i.e. .icon-search.
- Include the snippet of code to your template.php file - do not forget to replace THEME in the function name with the name of your theme i.e. bartik_menu_link
- If you are using another library than Font-Awesome, do no forget to change the class prefix - check the comments
- Enjoy!
Comments
Great trick!
Great trick!
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
I just realized I didn't made
I just realized I didn't made my code as flexible as could be... Here you go with a better version :)
Yet another cleaner version
I've taken what lacliniquemtl did above, and improved it quite a bit. Changes include:
hook_preprocess_menu_link
function and make a module out of this ;)icon-foo another-class
for the classes of the menu item and you'll get the following output:Here is the code...
Edit April 7, 2014:
<span>
instead of semantically incorrect<i>
.<a>
tag, which causing weird issues with the Zen theme.Works Great!
This is fantastic! Just wanted to say thanks!
improve code
i improved your code, so we can add classes that use for setting,
example : class='icon-blabla icon-large';
FontAwesome
The improvement above is a special case for FontAwesome (examples here), which provides the ability to alter icons using yet other icon classes, such as icon rotation (icon-rotate-90, icon-flip-vertical, etc), spinners (icon-spin), size (icon-large, icon-2x, icon-4x, etc), color (icon-muted), and border (icon-border).
But my question is does this work properly for *stacking* icons? Eg:
Thanks.
I have made a module
I have made a module (sandbox) to wrap the menu item title with html code, so we can add tag font-icon.
See Documentation: http://bit.ly/15FzOKl
Sandbox : https://drupal.org/sandbox/m_roji28/2081231
Minor tweaks voor FontAwesome v4
Font Awesome improvement
The links used in menu could be used in breadcrumb too. But the code above works only for menu links, and will break if the icon will be used in breadcrumb. Using the theme_link() we provide a more generic solution. Where we don't want icons we can hide them using CSS.
Sorry for my english. ;)
great code, thank you :)
great code, thank you :)
I think that should have some span tags?
Easier Option
Sad to say, the latest implementation didn't end up working for me. I had a bunch of 'foreach' warning errors on my UC product pages.
I did manage to find a super simple solution though which was my original thought on making a menu item work without having the text.
Check out: https://www.drupal.org/project/menu_html
This will allow you to paste the html for the fontawesome or glyphicon directly into the title of the link.
Marvelous code! This should
Marvelous code! This should be a module by itself.
filtermusic.net
Does not work
@ jwilson3 I am using zurb-foundation theme at https://drupal.org/project/zurb-foundation. I added your code to template.php of my theme which is in sites/sitename/themes directory (i am using aegir BOA by omega8.cc) and changed 'icon-' in your code to 'fi-' as foundation icons classes start with 'fi-' in my theme (example fi-home or fi-social-facebook). However it does not seem to do anything when I add 'fi-home' class in menu attributes. The icon does show before the menu text and firebub shows class .fi-home:before but "i" and "span" tags are not added as expected.
zurb-foundation theme has its own theme_menu_link impl
@amsri:
The above suggests that the code snippet is not being run at all. It looks like zurb-foundation has its own pre-existing theme function for theming menu_links (theme_zurb_foundation_menu_link) which means simply adding the code snippet above wont work. You need to add the snippet into the existing theme function.
If you can't figure out how to get this working with your theme, your best bet would be to try to get support on IRC or using a new discussion thread. This really isn't the place to diverge this discussion into theme-building support questions. The code seems to work fine for myself and various others who have continued to use and make improvements.
Thanks for reply ...one thing
hi jwilson3 thanks for your reply. I had just one more question regarding your code. How should the following line of your code be amended to suit the foundation icon class names:
if (substr($class, 0, 5) == 'icon-') {
Should it be
if (substr($class, 0, 5) == 'fi-') {
OR
if (substr($class, 0, 3) == 'fi-') {
are there any other amendments to make.
foundation icon class amendment
It should be:
as for other changes, I do not know; you'll need to test this first to see if it works.
working only on non superfish menus
Ok the code is working now but only on non superfish menus. The problem was that it was not affecting the menu handled by superfish block (superfish module). It works only on non superfish menus. Any ideas to make it work on superfish menus rendered by superfish modules?
great idea!
great idea!
http://drupals.cn
Alternative
I haven't personally tried this module yet, but it looks like it is designed around this sort of topic:
https://www.drupal.org/project/icon
Updated for Drupal 9, FontAwesome 5
I recently had the occasion to research this topic, and my findings are summarized here.
I went with this expedient solution:
https://github.com/gnikolovski/link_alter
The developer has a blog post about his approach:
http://dev.studiopresent.com/blog/back-end/altering-menu-links
The crux of it (because link-only answers are discouraged) can be boiled down to this:
I found this method worked well with Font Awesome 5, which now uses JavaScript to inject SVG icons where appropriate markup is found, so you don't need to mess around with Sass mixins, Unicode values, CSS pseudo-selectors and all that nonsense any more.
Thanks to @sonfd for the tip in the comment, which might be even better:
https://www.drupal.org/project/fontawesome_menu_icons
Since I already solved my problem and I'm on a deadline, I might not check that module out right away. But it is good to know that it exists!
[1]: https://i.stack.imgur.com/ngmeO.png