How import Font Awesome in LESS

Using Font Awesome with LESS

This is a short but useful post about working with LESS. If you haven’t tried it yet, LESS is a powerful CSS preprocessor that can save you a lot of time when writing styles. One of the first questions that comes up when starting a LESS-based project is how to include Bootstrap or Font Awesome. Bootstrap v3 has good documentation covering its use with LESS and Sass. Font Awesome is slightly trickier — the standard @import alone won’t work.

Problem: Including Font Awesome in a LESS project using a plain @import fails — the font files are not resolved correctly at compile time.

Solution: Add two LESS variables for the font path and base filename alongside the import:

/* Import Font Awesome */
@import "your-path/font-awesome/less/font-awesome.less";
/* Path to Font Awesome font files */
@fa-font-path: "your-path/font-awesome/fonts/";
/* Font Awesome font file base name */
@fa-font-name: "fontawesome-webfont";

NOTE: @fa-font-path sets the directory where Font Awesome's font files live, and @fa-font-name sets the base filename used in the @font-face declarations. Both variables must be defined in the same file as the @import statement. The same approach applies to Bootstrap v3 LESS components that reference font assets.