Less

Using Less as a CSS pre-processor in your project? No problemo, Font Awesome has a Less version if you’d prefer to import our styling into your workflow (and there’s nothing less than about that!)

We’ll cover the basics of getting all the files you’ll need from the directory, adding Font Awesome to your compile, tools for referencing icons with ease, and more!

Before You Get Started

Make sure you:

• Downloaded the Font Awesome v5 web-specific files and have them handy.
• Have a project set up with Less.

How’s This Organized?

Here are some details on the mixins and files made specifically for Less.

Files	What They Do
fontawesome.less	Main Font Awesome compile
brands.less	Brands icon styles
solid.less	Solid icon styles
regular.less	Regular icon styles
light.less	Light icon styles
duotone.less	Duotone icon styles
_core.less	Base icon reference class syntax and definition
_mixins.less	Utilities used throughout styling/icon definitions
_icons.less	All icon definitions
_variables.less	Where variables are defined that are used throughout styling
_animated.less	animated icon support styling
_bordered-pulled.less	bordered + pulled icon support styling
_fixed-width.less	fixed-width icon support styling
_larger.less	icon sizing support styling
_list.less	icons in a list support styling
_rotated-flipped.less	rotating icons support styling
_stacked.less	stacking icons support styling
_screen-reader.less	screen-reader specific and accessibility support styling

---

Adding Font Awesome to Your Compile

Copy the less folder into your project. Then copy the entire webfonts folder into your project where your static files get served.

Open your project’s less/variables.less and edit the @fa-font-path variable to point to where you placed the webfonts folder.

@fa-font-path:  "../webfonts";

Import Font Awesome by adding @import "less/fontawesome.less" in your main Less file. Also, import one or more styles @import "less/solid.less" in your main Less file. Compile your code and get to using those new icons in your project!

Watch those files paths!

You probably already know this, but we seem always to forget it. The font path is relative from your compiled CSS directory. Ensure that you place your webfonts directory in a place relative to where your final CSS will be located.

Using Our Mixins

You can use .fa-icon; to get things set up as an icon. Use .fas; to create an icon in the Solid style. Import other styles to use other prefixes. Use variables to include content values a little easier.

@import "./fontawesome/less/fontawesome";
@import "./fontawesome/less/solid";
@import "./fontawesome/less/brands";

.user {
  .fa-icon;
  .fas;

  &:before {
    content: @fa-var-user;
  }
}

.twitter {
  .fa-icon;
  .fab;

  &:before {
    content: @fa-var-twitter;
  }
}