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!)
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 7,864 icons in Font Awesome
5 Classic styles of every icon
3 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!
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!
Watch those files paths!
You probably already know this, but we seem always to forget it. The font path is relative from your compiled CSS directory. Ensure that you place your webfonts directory in a place relative to where your final CSS will be located.
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.