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!)
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!
How's This Organized?
Here are some details on the mixins and files made specifically for Less.
|Files ||What They Do|
|Main Font Awesome compile|
|Brands icon styles|
|Solid icon styles|
|Regular icon styles|
|Light icon styles|
|Duotone icon styles|
|Base icon reference class syntax and definition|
|Utilities used throughout styling/icon definitions|
|All icon definitions|
|Where variables are defined that are used throughout styling|
|animated icon support styling|
|bordered + pulled icon support styling|
|fixed-width icon support styling|
|icon sizing support styling|
|icons in a list support styling|
|rotating icons support styling|
|stacking icons support styling|
|screen-reader specific and accessibility support styling|
Adding Font Awesome to Your Compile
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
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!
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.