Drupal Font Awesome

Posted onby admin
  1. Font Awesome Icons
  2. Drupal Font Awesome
  3. Drupal Font Awesome Icon Picker
Google fonts

I'm currently working on a Drupal build where I'd like users to be able to easily add icons to menu items through the UI. Enter FontAwesome, the scalable vector icon font that leverages the power of CSS. That in combo with the infamous Menu Attributes module allows users to add custom classes to Drupal menu items via the Menu edit interface on a per menu item basis. This is ideal for what we need to accomplish.

  1. Font Awesome library module for Drupal with Debian packaging branch - dpocock/drupal-mod-fontawesome.
  2. Brand Icons: How to use Font Awesome drupal Icon, large icon, change color.

Fa-drupal Unicode: f1a9 Created: v4.1 Categories: Brand Icons After you get up and running, you can place Font Awesome icons just about anywhere with the tag: Example of drupal fa-drupal.

Install Menu Attributes

First, grab the Menu Attributes module and enable it either via Drush or download and enable it via the modules admin page. Once you enable Menu Attributes, visit /admin/structure/menu/settings and be sure that the 'Classes' attribute is enabled. Now, you'll see this as a text field for any given menu item when editing those.

Get Font Awesome

Font

Font Awesome Icons

Now, we need to add Font Awesome and for the sake of this tutorial, I'll use the CDN version which we can add to our theme using a preprocess function. As aways, unless you're building a custom module, add the preprocess function to your theme's template.php file or create one if you don't have one already. For my preprocess function, I can use hook_preprocess_html with drupal_add_css.

Drupal Font Awesome

Be sure to replace MYTHEME with the actual machine_name of your theme and clear cache. If all went well, you'll now have Font awesome available to use. Note, you can also download Font Awesome and self-host it as an alternative to the CDN version.

Add the Icon Classes

Drupal Font Awesome

The next step is to add some icon classes to your menu items via the Menu Attributes classes field. To see what icons are available to you, refer to the Font Awesome 'Cheat Sheet' on their site. I'll add a 'home' icon next to my home link so I simply edit the home link and add this to the classes field typically located at /admin/structure/menu/manage/main-menu:

Style away

Above, the first fa instantiates Font Awesome and fa-home selects your icon. This will need a bit of theming and I found a few caveats as well. Since the class is added to your menu's 'a' link, you'll want to define your font for the menu link itself and for the icon which gets added via a CSS 'before' class. So if your menu id is primary-nav, you can do this:

Drupal Font Awesome

The finished menu with Font Awesome Icons

One issue I ran in to was that Firefox had trouble rendering the icons from the CDN and it's a documented issue apparently. To solve this, you may need to define Font Awesome in your theme's CSS via the @font-face attribute with an absolute path to the CDN -- that solved it for me. Beyond this, you can style and color as needed all the while using CSS. That's pretty much all you need to do so as you can see it makes it trivial for users to add their own icons to menus.

Resources

Tags

Drupal Font Awesome Icon Picker

Keywords : Font awesome drupal brand icon example, fa-drupal font awesome icons example, How to use font awesome drupal icon with example

Example


Drupal Font Awesome

Result