Basic Use | Font Awesome

fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

Basic Use

You can place Font Awesome icons just about anywhere using a style prefix and the icon’s
name. We’ve tried to make it so that icons take on the characteristics and appear alongside
text naturally.

Font Awesome is designed to be used with inline elements, and we recommend sticking
with a consistent HTML element to reference them by in your project. We like the <i>
tag for brevity and because most folks use <em></em> for emphasized/italicized
semantic text these days. If that’s not your cup of tea, using a <span> is more
semantically correct.

To reference an icon, you need to know two bits of information. 1) its name, prefixed
with fa- (meaning “font awesome” naturally!) and 2) the style you want to use’s
corresponding prefix**.

<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 -->

Style
Style Availability Prefix Example Rendering

Solid Free fas <i class="fas fa-camera">

</i>

Regular Pro far <i class="far fa-camera">

Required </i>

Light Pro fal <i class="fal fa-camera">

Required </i>

1/5
 Style
Style Availability Prefix Example Rendering

Duotone Pro fad <i class="fad fa-camera">

Required </i>

Brands Free fab <i class="fab fa-font-

awesome"></i>

The fa prefix has been deprecated in version 5. The new default is the fas solid style
and the fab style for brands.

Since Font Awesome was first implemented and continues to support being rendered
using the CSS @font-face method, each of its styles corresponds to a particular font
weight:

Style Availability @font-face weight

Solid Free Plan 900

Regular Pro Plan Required 400

Light Pro Plan Required 300

Duotone Pro Plan Required 900

Brands Free Plan 400

Why would I need font-weight values?

While using an <i> or other HTML element is the most popular and easy way to render
an icon, we do have advanced ways of using custom written CSS pseudo-elements if you
prefer to have extra markup. Font weights are used with that technique and are how you
would set the icon's style.

Ligature use in Font Awesome on the web

While our desktop workflow takes advantage of ligatures to make inserting icons into your
favorite design and presentation apps easy. As well as our SVG + JS framework, ligature
lookup tables take up additional file space and can cause performance issues. Until we

2/5
have options and solutions for subsetting icons, we aren't comfortable considering
ligatures for Web Fonts + CSS.

Font Awesome Icons + Your Project’s Styling

Font Awesome icons automatically inherit CSS size and color (as seen in the examples
below). This means they blend in with text inline wherever you put them. Font Awesome
tries not to be too opinionated, and sets just the basic styling rules icons needed to render
properly in context.

<span style="font-size: 3em; color: Tomato;">

<i class="fas fa-camera"></i>
</span>

<span style="font-size: 48px; color: Dodgerblue;">

<i class="fas fa-camera"></i>
</span>

<span style="font-size: 3rem;">

<span style="color: Mediumslateblue;">
<i class="fas fa-camera"></i>
</span>
</span>

Additional Styling Options

While the basic way to reference an icon is simple and hopefully straight-forward, we’ve
provided support-level styling for things like sizing icons, aligning and listing icons, as
well as rotating and transforming icons.

You can also add your own custom styling to Font Awesome icons by adding your own
CSS rules in your project’s code. Everything you can normally control with CSS is up for
grabs - from color to display to alignment.

We recommend targeting icons in your CSS in couple of different ways.

Styling Case Recommended Selector

Custom styling all

icons Add a consistent custom class to all icons (e.g. .icon , .
[projectprefix]-icon , or .fa-icon )

You can also use style classes that match your in-use icon styles
.fas { ... }
.far { ... }
.fal { ... }
.fad { ... }
.fab { ... }

3/5
 Styling Case Recommended Selector

Custom styling a
specific icon Use the individual icon name, prefixed with .fa-
.fa-user { ... }
.fa-font-awesome { ... }

Here’s a quick example of using those selectors to add custom color to Font Awesome
icons:

adding-custom-styles.html

<head>
<!-- reference your copy Font Awesome here (from our CDN or by hosting yourself)
-->
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">

<!-- custom styling for all icons -->

i.fas,
i.fab {
border: 1px solid red;
}

<!-- custom styling for specific icons -->

.fa-fish {
color: salmon;
}

.fa-frog {
color: green;
}

.fa-user-ninja.vanished {
opacity: 0.0;
}

.fa-facebook {
color: rgb(59, 91, 152);
}
</head>
<body>
<i class="fas fa-fish"></i>
<i class="fas fa-frog"></i>
<i class="fas fa-user-ninja vanished"></i>
<i class="fab fa-facebook"></i>
</body>

Writing Custom CSS with our SVG + JS framework

When using our SVG framework, remember that Font Awesome-based <i> DOM
elements are replaced with new <svg> elements by default. Be sure that your css rules
target the right elements.

4/5
5/5