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:
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
- You’ll see two additional options in your menu Edit form:
- FontAwesome Icon
- FontAwesome Icon - Appearance
- 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.
- 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.
- Now complete your menu structure if you haven’t done that yet and take a look at your menu.
