Font-awesome 6 is the latest version icon library.
It adds 7000 new icons with this version, a total of 14000 icons in this library.
It adds a new thin icon set of icons.
Support lot custom properties to style an icon
You can also create your icon with this library and use it in your application.
It comes with a free and pro version.
Fontawesome 5 version has Around 7000 icons. It added more versions and the total icons in fontawesome6 have 14000 icons.
Fontawesome CSS custom properties
The following are the variables you can use in CSS using variables.
--fa-style-family
: font family for these icons.
--fa-style
: font-weight valid value
--fa-display
: valid values of the CSS display property
--fa-inverse
: the inverted color of an icon, value values are color codes(RGB,hexa codes, etc)
--fa-rotate-angle
: rotation of an icon, valid values of the CSS transform property
And many more animations, bordered, pulled, stacking, Duotone, and pseudo-element style you can see more custom properties here
Here is an example for custom css variables
:root {
--fa-style-family: "Font Awesome 6 Pro";
--fa-style: 400;
--fa-border-color: blue;
--fa-primary-color: blue;
--fa-secondary-color: red;
}
and you can use the variables in CSS style as below
.icon{
color: var(--fa-primary-color);
content: '\f39e';
font-family: var(--fa-style-family);
font-weight: var(--fa-style);
}
and it is used in HTML as given below.
<i class="fa-brands fa-facebook-f" class="facebookicon"></i>
You can use in css attribute as given below example
You can integrate this library in many ways.
- web fonts
- SVG and SVG Sprite
- you can host the library in a custom environment
- use it CSS content
- SASS and SCSS support
- WordPress
- npm, bower, and yarn package
- javascript package free and pro icons
- python Django packages
Some of the existing icon names are refactored and have backward compatibility.
Fontawesome icon styles
Below is a set of icon styles that can be integrated into any application.
Icon styles | font-family | Description | font-weight |
---|---|---|---|
Solid | Font Awesome 6 Free | Opensource free icons | 900 |
Regular | Font Awesome 6 Pro | Pro Icons | 400 |
Light | Font Awesome 6 Pro | Pro Icons | 300 |
Thin | Font Awesome 6 Duotone | Pro Icons | 100 |
Duotone | Font Awesome 6 Duotone | Duotone Icons | 900 |
Brand | Font Awesome 6 Brands | Brand icons | 400 |
You can get it from [font awesome 6 pro download](/https://fontawesome.com/)