Adding between the tags isn't the greatest since it's adding additional unneeded markup. To do this a better way I suggest creating a custom WYSIWYG module to tweak the CK Editor settings. Basically, create a module that adds a ckeditor-config.js for extra configuration settings with hookwysiwygeditorsettingsalter. Inside the file you add. Aug 03, 2015 The Icon API module integrates common icon bundles like Font Awesome, Bootstrap and more within Drupal. The module offers integration with a suite of sub-modules. For example, if you want to add icons to menus then install the iconmenu module. I could not find a libraries folder unless in drupal modules contrib libraries which is the only folder named libraries and it has nothing about fontawesome in it – hidar Jul 8 '17 at 8:57 Create a /libraries folder on the root folder of your project near modules, themes, core, and put the fontawesome directory on it. – guilhom Jul 8 '17 at. Time is of the essence. With DXPR Theme, you will build powerful marketing content. Every font awesome icon also has a unicode associated with it, see the cheatsheet. These unicodes look like . This means that you do not need to use the class, but can use this as a character instead. There is however one big BUT. Just adding the unicode does not work, you also have to apply the font-awesome font to the HTML selector.
Example
Result
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.
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
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.
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
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 Cheat
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
Drupal Font Awesome
Tags
