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 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 |
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.
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.
// importing core styling file@import './fontawesome/less/fontawesome.less';
@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, and Sharp Solid@import './fontawesome/less/solid.less';@import './fontawesome/less/brands.less';@import './fontawesome/less/sharp-solid.less';Using Duotone Icons
If a project uses Duotone icons, you’ll need to @import the correct file(s).
// importing core styling file@import './fontawesome/less/fontawesome.less';
// import Duotone Solid style@import './fontawesome/less/duotone.less';
// import Duotone Regular style@import './fontawesome/less/duotone-regular.less';
// import Sharp Duotone Solid style@import './fontawesome/less/sharp-duotone-solid.less';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.woff/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';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>