Questions tagged [font-awesome]

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:

• v4.x.x
• v3.x.x (These docs are for v3.2.1, which is no longer officially supported)

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- where b stands 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: either circle or square.
• [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;
}