Dev Notes

Various Cheat Sheets and Resources by David Egan/Carawebs.

Add Font Awesome to Roots

Roots, WordPress
David Egan

Font-awesome is a great way to add iconography to a website.

  • Copy Font Awesome font files to /assets/fonts.
  • Make a new directory called “font-awesome” in assets/less.
  • Add Font Awesome LESS files to the directory assets/less/font-awesome.

The file assets/less/font-awesome/font-awesome.less imports all other files.

Check assets/less/font-awesome/variables.less references the font files properly – relative to the compiled CSS file.

Open assets/less/app.less and add:

@import "font-awesome/font-awesome.less";

In this way, the font-awesome rules are brought into the main less file that will be compiled.

Open Gruntfile.js and add assets/less/font-awesome/*.less to the “watch” task.

If any watched less files change, the css will be recompiled.

comments powered by Disqus