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
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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!
Need the power (variables, mixins, etc.) that Less brings. Plain CSS is far <pun>less</pun> complex.
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.
If a project uses Duotone icons, you'll need to @import two separate files.
// importing core styling file@import"./fontawesome/less/fontawesome.less";// our project needs Duotone - which requires both of the following files@import"./fontawesome/less/duotone.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.
Using a Downloaded Kit
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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.
Here's an example of how to reference icons with your compiled and hosted CSS:
<head><!--load your compiled CSS (including Font Awesome) --><linkhref="/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 --><iclass="fa-solid fa-user"></i><!-- Or you can use a <span> element, with classes applied in the same way --><spanclass="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 .fa-icon- and .fa-family- 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);}// Regular style of triangle-exclamation.triangle-exclamation{.fa-icon-regular(@fa-var-triangle-exclamation);}// Light style of newspaper.newspaper{.fa-icon-light(@fa-var-newspaper);}// Thin style of paintbrush-fine.paintbrush-fine{.fa-icon-thin(@fa-var-paintbrush-fine);}// Duotone style of camera-retro.camera-retro{.fa-icon-duotone(@fa-var-camera-retro);}// Twitter brand icon.twitter{.fa-icon-brands(@fa-var-twitter);}// Sharp Solid style of trash.trash{.fa-icon-solid(@fa-var-trash);.fa-family-sharp();// define Sharp family}// Sharp Regular style of trash.trash{.fa-icon-regular(@fa-var-trash);.fa-family-sharp();// define Sharp family}// Classic Solid style of trash.trash{.fa-icon-solid(@fa-var-trash);.fa-family-classic();// explicity setting Classic family (optional since this is Font Awesome's default)}
Style Mixins
To use the style mixins, you'll want to:
Choose the right mixin for your desired style style.
Pass in the Less variable for the icon you want to display.
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.
Family Mixins
If you're using our mixins to render an icon in a specific family, like our Sharp family of styles, you'll need to reference the right family mixin (e.g. .fa-family-sharp). Classic is our default family of styles, so there's no need to set it with a family mixin unless you're trying to explicitly set to override a previous family.
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.
To write manual rules, you'll want to:
Get the core set up styling of icons by adding .fa-icon;
Use .fa-solid; to include the styling to render the icon in the Solid style (similar syntax for other styles)
Use .fa-classic; or .fa-sharp; to include the styling to render the icon in a specific family (Classic is set by default)
In a ::before pseudo-element rule, use icon variable names to make including an icon's Unicode values a little easier. This is similar in syntax to adding icons via pseudo-elements
// Solid style of user.user{.fa-icon;.fa-solid;&::before{content:@fa-var-user;}}// Regular style of triangle-exclamation.triangle-exclamation{.fa-icon;.fa-regular;&::before{content:@fa-var-triangle-exclamation;}}// Light style of newspaper.newspaper{.fa-icon;.fa-light;&::before{content:@fa-var-newspaper;}}// Thin style of paintbrush-fine.paintbrush-fine{.fa-icon;.fa-thin;&::before{content:@fa-var-paintbrush-fine;}}// Duotone style of camera-retro.camera-retro{.fa-icon;.fa-duotone;&::before{content:@fa-var-camera-retro;}}// Twitter brand icon.twitter{.fa-icon;.fa-brands;&::before{content:@fa-var-twitter;}}// Sharp Solid style of trash.trash{.fa-icon;.fa-solid;.fa-sharp;// define Sharp family&::before{content:@fa-var-trash;}}// Classic Solid style of trash.trash{.fa-icon;.fa-solid;.fa-classic;// explicity setting Classic family (optional since this is Font Awesome's default)&::before{content:@fa-var-trash;}}
Included Mixins
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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()
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)
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)