Less

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.

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!

Grab the Files

You’ll find everything you need in the fontawesome 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
`sharp-solid.less`	Sharp Solid icon styles
`sharp-regular.less`	Sharp Regular icon styles
`sharp-light.less`	Sharp Light icon styles
`sharp-thin.less`	Sharp Thin icon styles
`duotone.less`	Duotone Solid icon styles
`duotone-regular.less`	Duotone Regular icon styles
`duotone-light.less`	Duotone Light icon styles
`duotone-thin.less`	Duotone Thin icon styles
`sharp-duotone-solid.less`	Sharp Duotone Solid icon styles
`sharp-duotone-regular.less`	Sharp Duotone Regular icon styles
`sharp-duotone-light.less`	Sharp Duotone Light icon styles
`sharp-duotone-thin.less`	Sharp Duotone Thin icon styles
`_animated.less`	animated icon support styling
`_bordered-pulled.less`	bordered + pulled icon support styling
`_core.less`	Base icon reference class syntax and definitions
`_custom-icons.less`	includes Custom Icons in a Kit Download (if you’re using one)
`_fixed-width.less`	fixed-width icon support styling
`_icons.less`	All icon definitions
`_list.less`	icons in a list support styling
`_mixins.less`	Utilities used throughout styling/icon definitions
`_rotated-flipped.less`	rotating icons support styling
`_screen-reader.less`	screen-reader specific and accessibility support styling
`_sizing.less`	icon sizing support styling
`_stacked.less`	stacking icons support styling
`_variables.less`	Where variables are defined that are used throughout 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.

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.

// importing core styling file
@import './fontawesome/less/fontawesome.less';

// import some icon styles
@import './fontawesome/less/solid.less';
@import './fontawesome/less/brands.less';

If you wanted to use more styles, add more style imports:

// importing core styling file
@import './fontawesome/less/fontawesome.less';

// our project needs Classic Solid, Brands, Sharp Solid, Duotone Solid, and Sharp Duotone Solid
@import './fontawesome/less/solid.less';
@import './fontawesome/less/brands.less';
@import './fontawesome/less/sharp-solid.less';
@import './fontawesome/less/duotone.less';
@import './fontawesome/less/sharp-duotone-solid.less';

Then set the path where your Web Fonts can be found:

// importing core styling file
@import './fontawesome/less/fontawesome.less';

// our project needs Classic Solid, Brands, Sharp Solid, Duotone Solid, and Sharp Duotone Solid
@import './fontawesome/less/solid.less';
@import './fontawesome/less/brands.less';
@import './fontawesome/less/sharp-solid.less';
@import './fontawesome/less/duotone.less';
@import './fontawesome/less/sharp-duotone-solid.less';

// set the fa-font-path variable to the directory where your web fonts files are located
@fa-font-path: './fontawesome/webfonts';

Using a Downloaded Kit

Starting with version 6.4, you can now download a Kit to compile and host yourself just like you do with Font Awesome! To download your Kit, make sure the Kit’s version in Settings is set to “Latest 6.x” or if you selected a specific version, it needs to be at least 6.4. Then from the Set Up tab in your Kit, you’ll see the options for downloading. Your kit download will contain all of the Less files noted above.

Custom Icons in Downloaded Kits

If you have custom icons in your Kit, they will be included as an additional files in your Kit download.

Path to the files	What the files do
`/webfonts/custom-icons.woff2` `/webfonts/custom-icons.ttf`	Custom icon font in WOFF2 and TTF formats
`/less/custom-icons.less`	Less Preprocessor partial that handles the display of custom icons using Web Fonts

Here’s a simple example that follows the compile steps above along with custom icons:

// importing core styling file
@import './fontawesome/less/fontawesome.less';

//  importing Font Awesome styles
@import './fontawesome/less/solid.less';
@import './fontawesome/less/brands.less';

// importing a kit's custom icons
@import './fontawesome/less/custom-icons.less';

// set the fa-font-path variable to the directory where your web fonts files are located
@fa-font-path: './fontawesome/webfonts';

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>

Custom CSS Using Less Mixins

Alternately, 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. This method is also useful when you can’t change the HTML in your project.

Using our .fa-icon- and .fa-family- style mixins, you can easily generate custom CSS pseudo-element rules with CSS selectors specific to your project.

// Mixins
// Solid style of fa-user icon where the Classic family is implied
.user {
  .fa-icon-solid(@fa-var-user);
}

// Classic Solid style of fa-trash icon with the Classic family explicitly added
.trash {
  .fa-icon-solid(@fa-var-trash);
  .fa-family-classic();
}

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

// Sharp Regular style of camera-retro
.camera-retro {
  .fa-icon-light(@fa-var-camera-retro);
  .fa-family-sharp();
}

// Threads brand icon
.threads {
  .fa-icon-brands(@fa-var-threads);
}

Style Mixins

Below is the list of available icon style mixins. To use the style mixins, make sure you:

Choose the right mixin for your desired style style.
Pass in the Less variable for the icon you want to display.

Style Mixin	Availability	What Style Renders
`fa-icon-brands()`	Free Plan	Brands
`fa-icon-solid()`	Free Plan	Solid
`fa-icon-regular()`	Pro only	Regular
`fa-icon-light()`	Pro only	Light
`fa-icon-thin()`	Pro only	Thin

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

Family Mixins

Below is the list of available family mixins:

Family Mixin	Availability	What Style Renders
`fa-family-classic()`	Free Plan	Classic
`fa-family-sharp()`	Pro only	Sharp
`fa-family-duotone()`	Pro only	Duotone
`fa-family-sharp-duotone()`	Pro only	Sharp Duotone

If you’re using our mixins to render an icon in a specific family (Sharp, for example), you’ll need to add the family mixin (e.g. .fa-family-sharp()) to your CSS rule. Classic is our default family of styles, so there’s no need to add a family mixin unless you’re trying to override a previously set family.

Available Less Mixins

	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-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-family-sharp()` `.fa-family-classic()` `.fa-family-duotone()` `.fa-family-sharp-duotone()`	Mixins that, when combined with `.fa-icon-` style mixins, define the family of styles to be used.
`.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)

Available Less Variables

Font Awesome’s Less version also leverages several Less variables 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` property (default set to `inline-block`) for rendered icons
`@fa-font-display`	Sets the `font-display` property for Font Awesome’s icon fonts
`@fa-fw-width`	Sets the `width` property for all fixed-width icons
`@fa-inverse`	Sets the `color` property of `.fa-inverse`
`@fa-border-color`	Sets the `border-color` property used in bordered icons
`@fa-border-padding`	Sets the `padding` property used in bordered icons
`@fa-border-radius`	Sets the `border-radius` property used in bordered icons
`@fa-border-style`	Sets the `border-style` property used in bordered icons
`@fa-border-width`	Sets the `border-width` property used in bordered icons
`@fa-li-width`	Sets the `width` property for `fa-li` elements when styling icons in a list icons
`@fa-li-margin`	Sets the `margin-right` property for `fa-li` elements when styling icons in a list icons
`@fa-pull-margin`	Sets the `margin-left`/`margin-right` property for pulled icons icons
`@fa-primary-opacity`	Sets the opacity of a duotone icon’s primary layer
`@fa-secondary-opacity`	Sets the opacity 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 property of stacked icons
`@fa-stack-width`	Sets the width property of stacked icons
`@fa-stack-z-index`	Sets the z-index property of stacked icons
`@fa-font-path`	Sets the location of Font Awesome’s webfonts folder and assets.