Use Font Awesome in LESS

Hi there! Today we have very short, but enough helpful a post about work with LESS. Waaat? You don’t use still LESS? In vain! LESS it’s great tool, that allow significant savings your time when working with styles (CSS). One of the first question, that may arise on start use Less is about used Bootstrap or Awesome Fonts in project. Bootstrap (v.3.3.7) has great team, which endeavored to and good describe main thinngs about use Bootstrap in LESS/SAAS. Majority answers the questions, you can find here  and here. With Font Awesome proved more difficult. And variant of import “@import ‘your-path-to-font-awesome-less-file/font-awesome/less/font-awesome.less’;” won’t work.

How import Font Awesome in LESS

Solution of the problem

Solution, enough easy, just are need add 2 variables. Ultimately, you should get:

/* Import Font Awesome */
@import "your-path-to-font-awesome-less-file/font-awesome/less/font-awesome.less";
/* Load Font Awesome fonts from this directory. */
@fa-font-path: "your-path-to-font-awesome-less-file/font-awesome/fonts/";
/* File name for all Font Awesome font files. */
@fa-font-name: "fontawesome-webfont";

Leave Comment

Your email address will not be published. Required fields are marked *