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:
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.
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.
If i have installed a personal server with wamp, where do you mean with root directory? Thanks
Hello Diego,
the root directory is where the core folder is.
Regards
Jorge
thank you making this tutorial.above mention your example two libraies installed fontawesome-iconpicker,fontawesome but fontawesome is module and Font Awesome Menu Icons depend on it.if i am not wrong
.tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}.tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}.ws_toolbar {z-index:100000} .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px} .tb_highlight{background-color:yellow} .tb_hide {visibility:hidden} .ws_toolbar img {padding:2px;margin:0px}