0

enter image description here

Let's say I want to add Icons from the right\left of a Drupal menu H2 or li (such as in the place in the picture)... Actually I would also like to put a picture as a menu item by itself...

What is a good, veteran, and trusted module you could recommend for achieving all of these targets?

Thanks.

Improve this question
  • Special menu item module ... or menu image module. Im on my phone... – tenken Sep 5 '14 at 3:27
0

I've done something similar using the Menu attributes module

This allows CMS users to add a class to a menu item.

Then certain classes in the theme CSS are set to have a background image, with text hidden, or an image in the :before or :after pseudo-element.

Improve this answer
0

What a coincidence. I made good use of this module today because I needed to have bolded text in my menu items:

https://www.drupal.org/project/menu_html

After enabling you'll get a checkbox on each menu item that allows you to add HTML to the menu title (anything inside the anchor essentially). So this is where you would put your <img> tag or the markup necessary for your icons.

Note for security, make sure only trusted users have the ability to use this option, as you can imagine it creates an opportunity to embed malicious code.

EDIT: OP asked how you might add icons using this technique. I would use an icon font. For example with Font Awesome you can put in some markup like <i class="fa fa-refresh"></i> and it will use CSS to display the icon there. Font Awesome covers most bases. If you can't find something specific try icoMoon or Fontastic.

It's really up to you how you implement this. See the other poster's answer for a pure CSS solution.

Improve this answer
  • I've installed the module but I didn't see a way to add Icon-Only Menu-item... I wonder what's your way to do that? Ben. – Ben Sep 5 '14 at 5:04
  • Read my answer again, I never said there was an option for 'Icon-Only Menu-item'. This module gives you the ability to add any HTML or markup you want (which includes images, tags that generate icons, etc.). If you want to stick with a pure CSS solution, you can use the menu attributes module to generate icons as a background image on the list item, as @malcomio suggested. – bazeblackwood Sep 5 '14 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.