Using Less as a CSS preprocessor in your project? No problemo, Font Awesome has a Less version if you'd prefer to import our styling into your workflow.

Advertisement

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:

Grab the Files

You'll find everything you need in the fontawesome6 directory of the Font Awesome download. Below is the list of files made specifically for Less. You can add them all to your project or pick just the ones you need.

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

Advertisement

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";

In your main Less compile file, import Font Awesome by adding the core styles file, @import "less/fontawesome.less". Then import one or more styles. For instance, we'll import the Solid style with @import "less/solid.less". Compile your code and get to using those new icons in your project!

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

// for Duotones need both files
@import "./fontawesome/less/duotones.less";
@import "./fontawesome/less/_duotone-icons.less";

Ch-chigity Check Your Paths!

Make sure the font path and your webfonts directory are relative to where your compiled CSS will be located.

Autoprefixer is not included in v6!

For the sake of not being too prescriptive, we've removed Autoprefixer (opens new window) from our compile and build steps. If your project needs it, you'll need to add it yourself.

Adding Icons

Once you've added the imports above and have your compiled CSS that includes Font Awesome set up and referenced in your project, you can add icons to your project's HTML.

Here's an example of how to reference icons with your compiled and hosted CSS:

<head>
  <!--load your compiled CSS (including Font Awesome) -->
  <link href="/your-path-to-your-compiled-css-including-fontawesome/file.css" rel="stylesheet">
</head>
<body>
  <!-- This example uses <i> element with: 
  1. the `fa-solid` style class for solid style
  2. the `user` icon with the `fa-` prefix -->
  <i class="fa-solid fa-user"></i>

  <!-- Or you can use a <span> element, with classes applied in the same way -->
  <span class="fa-solid fa-user"></span>
</body>

Less Customizations at Your Command

Any changes to the Font Awesome Less variables (e.g. changing the fa- prefix or our sizing scales), will take effect in your project's compiled CSS.

Custom Less-based CSS Rules

If you want to use any of our Less mixins or utilities, you can leverage our CSS Pseudo-elements method of adding icons to your project to do. This method is also useful when changing the HTML on your project is not an option.

Using our @include fa-icon- style mixins, you can easily generate custom CSS Pseudo-element rules with CSS selectors specific to your project.

// Solid style of user
.user {
  .fa-icon-solid(@fa-var-user);
}

// Duotone style of camera-retro
.camera-retro {
  .fa-icon-duotone(@fa-var-camera-retro);
}

// Twitter brand icon
.twitter {
  .fa-icon-brands(@fa-var-twitter);
}

To use the style mixins, you'll want to:

  1. Choose the right mixin for your desired style style.
  2. Pass in the Less variable for the icon you want to display.
Style Mixin What Style Renders Availability
fa-icon-solid() Solid Free Plan
fa-icon-regular() Regular Pro Plans only
fa-icon-light() Light Pro Plans only
fa-icon-thin() Thin Pro Plans only
fa-icon-duotone() Duotone Pro Plans only
fa-icon-brands() Brands Free Plan

Style Mixins Include Set Up Styles Too!

These style mixins also handle the basic rendering styles that we bundle in our toolkit to make sure icons display perfectly in their context and in browsers.

A More Manual Custom CSS Approach

If you'd rather a more customizable approach when right your styling rules, we've made the utilties used in the style mixins available to get the same rendering results.

You can use .fa-icon; to get things set up as an icon. Use .fa-solid; to include the styling to render the icon in the Solid style. Importing other styles can be done similarly using other prefixes (e.g. .fa-regular;). Similar in syntax to adding icons via pseudo-elements, Use fa-content and variable names to make including an icon's Unicode values a little easier...

// Solid style of user icon
.user {
  .fa-icon;
  .fa-solid;

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

// Twitter brand icon
.twitter {
  .fa-icon;
  .fa-brands;

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

Included Mixins

Utilities What It Does
.fa-icon() A mixin that contains all of the base style set up for an icon (minus an icon's style and specific name/unicode) compile
.fa-icon-solid()
.fa-icon-regular()
.fa-icon-light()
.fa-icon-thin()
.fa-icon-duotone()
.fa-icon-brands()
Mixins that contain all of the base style set up for an icon along with a specific style to render the icon in
.fa-size() A mixin that calculates font size and vertical alignment for the relative sizing scale
.fa-sr-only() A mixin that visually hides an element containing a text-equivalent for an icon while keeping it accessible to assistive technologies
.fa-sr-only-focusable() A mixin that is used alongside .fa-sr-only() to show the element again when it’s focused (e.g. by a keyboard-only user)

Variables

Font Awesome's Less version also leverages several Less variables (opens new window) that allow for easier set-up and customization of our styling toolkit.

Variable What It Does
@fa-css-prefix Sets the prefix (default set to fa) used on all styling toolkit CSS rules (e.g. fa-lg) + icon reference classes (e.g. fa-user)
@fa-style Sets the default icon style (using @font-face weight)
@fa-style-family Sets the default font-family used
@fa-display Sets the display (opens new window) property (default set to inline-block) for rendered icons
@fa-font-display Sets the font-display (opens new window) property for Font Awesome's icon fonts
@fa-fw-width Sets the width (opens new window) property for all fixed-width icons
@fa-inverse Sets the color (opens new window) property of .fa-inverse
@fa-border-color Sets the border-color (opens new window) property used in bordered icons
@fa-border-padding Sets the padding (opens new window) property used in bordered icons
@fa-border-radius Sets the border-radius (opens new window) property used in bordered icons
@fa-border-style Sets the border-style (opens new window) property used in bordered icons
@fa-border-width Sets the border-width (opens new window) property used in bordered icons
@fa-li-width Sets the width (opens new window) property for fa-li elements when styling icons in a list icons
@fa-li-margin Sets the margin-right (opens new window) property for fa-li elements when styling icons in a list icons
@fa-pull-margin Sets the margin-left/margin-right (opens new window) property for pulled icons icons
@fa-primary-opacity Sets the opacity (opens new window) of a duotone icon's primary layer
@fa-secondary-opacity Sets the opacity (opens new window) of a duotone icon's secondary layer
@fa-size-scale-base Sets the base step size that all other relative sizing steps are based on
@fa-size-scale-2xs Sets the size of step used when relatively sizing icons with .fa-2xs
@fa-size-scale-xs Sets the size of step used when relatively sizing icons with .fa-xs
@fa-size-scale-sm Sets the size of step used when relatively sizing icons with .fa-sm
@fa-size-scale-lg Sets the size of step used when relatively sizing icons with .fa-lg
@fa-size-scale-xl Sets the size of step used when relatively sizing icons with .fa-xl
@fa-size-scale-2xl Sets the size of step used when relatively sizing icons with .fa-2xl
@fa-stack-vertical-align Sets the vertical-align (opens new window) property of stacked icons
@fa-stack-width Sets the width (opens new window) property of stacked icons
@fa-stack-z-index Sets the z-index (opens new window) property of stacked icons
@fa-font-path Sets the location of Font Awesome's webfonts folder and assets.