Font Awesome is an iconic standalone vector font, initially developed for use with the Twitter Bootstrap front-end framework.
Font Awesome is an iconic font purely built using scalable vector graphics, so it provides clear, smooth and scalable icons for use in different browsers and on different devices.
Font Awesome is currently on version 5.15.
You can check the new icons added here
Previous Versions:
Version 4.1 was the first Font Awesome version that drops support of IE7 entirely, so you should not upgrade to it or any later version if your application must support IE7 browser.
Current version provides 7,865 font-icons
You can subset font-awesome using either icnfnt or fontello to create specific icon sets rather than downloading the entire family of icons.
It is free for commercial use and licensed under the SIL Open Font License 1.1.
CDN
Font awesome is available as a hosted file on content delivery networks, eg BootstrapCDN and Cloudflare CDN.
Stack Overflow Snippet Quick Start v5.15.2
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
Syntax, v5.x.x (documentation):
fa[x] fa-[name]
Where:
[x]is a prefix used for style group types (ex:fab-wherebstands for brand)[name]is the name of the icon (icon list).
For example:
<i class="fas fa-camera"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == camera -->
<i class="fas fa-camera"></i> <!-- using an <i> element to reference the icon -->
<span class="fas fa-camera"></span> <!-- using a <span> element to reference the icon -->
Stack Overflow Snippet Quick Start v4.7.0
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
Syntax, v4.x.x (documentation):
fa fa-[name]-[shape]-[o]-[direction]
Where:
[name]is the name of the icon (icon list).[shape]is the optional shape of the icon's background: eithercircleorsquare.[o]is the optional outlined version of the icon.[direction]is the direction in which certain icons point (arrows, etc.).
For example:
<i class="fa fa-cogs"></i>
<i class="fa fa-bookmark-o"></i>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-arrow-left"></i>
As Font Awesome icons are font-based we can then apply our own css styling on top:
i.fa {
color: purple;
font-size: 64px;
padding: 5px 10px;
}
