How to add font awesome to roots with less?

Hey guys.
I thought it would be a trivial issue to integrate font awesome with roots, but boy was I wrong. Can someone show me an example how it is done? I mean off course to do it with less css.

Much love from a rainy Stockholm!

What issue did you run into? There is nothing special about Roots use of Bootstrap. Is Font Awesome conflicting with the Bootstrap glyphicons? You could probably find something online about integrating Font Awesome with Bootstrap.

Have you tried http://fontawesome.io/get-started/#custom-less ?

Hello guys.

@Foxaii I tried it that way, but I could not get it to work. I figured that the most efficient way to do it was to use a CDN, might not be the perfect solution, but it works.

I added the following to lib/custom.php

/*Add font awsome from CDN
*Instructions: http://youneedfat.com/font-awesome-wordpress-cdn/
*/

add_action( 'wp_enqueue_scripts', 'prefix_enqueue_awesome' );
/**
* Register and load font awesome CSS files using a CDN.
*
* @link http://www.bootstrapcdn.com/#fontawesome
* @author FAT Media
*/
function prefix_enqueue_awesome() {
wp_enqueue_style( 'prefix-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', array(), '4.0.3' );
}

You definitely can get the custom less solution to work. How far did you get and can you better describe the error?

Here’s the hassle free way I’ve been doing it for a while:

  1. Copy the entire contents of the Font Awesome less directory into assets/less/font-awesome
  2. Move the font files from FontAwesome’s fonts dir into assets/fonts
  3. In your app.less file add this before the Bootstrap less @import:
    @import "font-awesome/font-awesome.less";

Et voilà, after a Grunt you should be good to go.

4 Likes

Hi everyone,
What I did to add awesome, is to import font- awesome.css with app.css and then add ( Home) into Navigation Label.

I am sure it’s not efficient way but at least the easiest one :slight_smile:

I think I have the same problem. My goal is to add something like this to my app.less file and have it work.

ul.nav {
   li.menu-home{
      .fa;
      .fa-home;
   }
}

However, Grunt gives me this error:

Running "less:dist" (less) task
>> NameError: .fa is undefined in assets/less/app.less

I’ve added Font Awesome to my roots directory in the same manner as @cfx. I’ve updated the font-path according to the Font Awesome Custom Less solution.

Also, prior to adding any LESS styling to my app.less file Grunt compiles without any errors and my main.min.css contains all of the Font Awesome CSS styles. So I can add something like <i class="fa fa-home"></i> to a page, post, or widget and it works fine.

Any ideas?

Looks like you’ll have to wait for 4.1 or beyond.

Thanks very much for the update - and glad to know it wasn’t just me.

In the meantime you can give your nav item a unique class then target it using :before and add the FontAwesome icon that way.