Skip to content


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!

How’s This Organized?

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

FilesWhat They Do
fontawesome.lessMain Font Awesome compile
brands.lessBrands icon styles
solid.lessSolid icon styles
regular.lessRegular icon styles
light.lessLight icon styles
duotone.lessDuotone icon styles
_core.lessBase icon reference class syntax and definition
_mixins.lessUtilities used throughout styling/icon definitions
_icons.lessAll icon definitions
_variables.lessWhere variables are defined that are used throughout styling
_animated.lessanimated icon support styling
_bordered-pulled.lessbordered + pulled icon support styling
_fixed-width.lessfixed-width icon support styling
_larger.lessicon sizing support styling
_list.lessicons in a list support styling
_rotated-flipped.lessrotating icons support styling
_stacked.lessstacking icons support styling
_screen-reader.lessscreen-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!

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 {
&:before {
content: @fa-var-user;
.twitter {
&:before {
content: @fa-var-twitter;