| Drupal
Add Font Awesome Icons to Your Drupal Menus

Font Awesome icons use scalable vectors. You get a high-quality icons, that look good no matter the size of the screen.

The Drupal contrib module "Font Awesome Menu Icons" will help you to add and position the icons in your menu tabs. 

Step #1. Module Installation

In order to install the Font Awesome Menu Icons module, you have to meet certain dependencies. It requires the Font Awesome module and the Libraries module

  • For proper functioning of the module, download and extract two libraries into your /libraries/ folder:
  • You should have following structure in your [root]/libraries folder after downloading/unzipping/renaming your folders: 

The /libraries/ folder structure

 Step #2. Create Menu Items

For demonstration purposes in this tutorial, we’ll be using the Main navigation menu. You can apply this approach to all menus in Drupal. Even custom ones.

  • Click Structure > Menus > Main navigation
  • Click the Edit button next to the Home menu link

Edit menu Main Navigation

  • You’ll see two additional options in your menu Edit form:
    • FontAwesome Icon
    • FontAwesome Icon - Appearance

Two additional options

  • Click the first text box. You will see a tooltip with all FontAwesome icons to choose from. You can even filter them with the filter option on top.

Icons filter

  • Choose the icon of your liking or write the code according to the FontAwesome Cheatsheet
  • The second option allows you to choose whether you want the icon before/after the text or if you want no text at all. For this example, I’m going to place the icon after the text
  • Click Save.

Choose your icon appearance and click Save

  •  Now complete your menu structure if you haven’t done that yet and take a look at your menu. 

Final menu

You can tweak the size and color of your icons with CSS to fit the look you are trying to achieve.
I hope you liked reading this tutorial. Please leave your comments below. 

About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.