To use the Font Awessome icons, dd the following line inside the <head> section of your HTML page:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

Note: No downloading or installation is required!

You Place Font Awesome icons by using the prefix fa and the icon’s name.

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
</head>
<body>

<i class=”fa fa-car”></i>
<i class=”fa fa-car” style=”font-size:48px;”></i>
<i class=”fa fa-car” style=”font-size:60px; color:red;”></i>

</body>
</html>

Font Awesome is designed to be used with inline elements.The <li> and <span> elements are widely used for icons.

Also note that if you change the font-size or color of the icon’s container, the icon changes. Same things goes for shadow, and anything else that gets inherited using CSS.

Larger Icons
The fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x, classes are used to increase the icon sizes relative to their container.

<i class=”fa fa-car fa-lg”></i>
<i class=”fa fa-car fa-2x”></i>
<i class=”fa fa-car fa-3x”></i>
<i class=”fa fa-car fa-4x”></i>
<i class=”fa fa-car fa-5x”></i>

List Icons
The fa-ul and fa-li classes are used to replace default bullets in unordered lists.

<ul classes=”fa-ul”>
<li><i class=”fa-li fa fa-check-square”></i>List Icons</li>
<li><i class=”fa-li fa fa-spinner fa-spin”></i>List Icons</li>
<li><i class=”fa-li fa fa-square”></i>List Icons</li>
</ul>

  • List icons
  • List icons
  • List icons

Bordered and Pulled Icons

The fa-border, fa-pull-right, faa-pull-left classes are used for pull quotes or article icons.

Example:
<i class=”fa fa-quote-left fa-3x fa-pull-left fa-border”></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Animated Icons

The fa-spin class gets any icon to rotate, nd the fa-pulse class gets aany icon to rotate with 8 steps.
Example:
<i class=”fa fa-spinner fa-spin”></i>
<i class=”fa fa-circle-o-notch fa-spin”></i>
<i class=”fa fa-refresh fa-spin”></i>
<i class=”fa fa-cog fa-spin”></i>
<i class=”fa fa-spinner fa-pulse”></i>

Font Awesome Icons

Note: IE8 and IE9 do not support CSS3 animations.

Rotated and Flipped Icons

The fa-rotate* and fa-flip-* classes are used to rotate and flip icons.

Example:
<i class=”fa fa-shield”></i>
<i class=”fa fa-shield fa-rotate-90″></i>
<i class=”fa fa-shield fa-rotate-180″></i>
<i class=”fa fa-shield fa-rotate-270″></i>
<i class=”fa fa-shield fa-flip-horizontal”></i>
<i class=”fa fa-shield fa-flip-vertical”></i>

Stacked Icons

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x class for the regularly sized icon, and fa-stack-2x for the larger icon.

The fa-inverse class can be used as an alternative icon color. You can also add larger icon classes to the parent to further control the sizing.

<span class=”fa-stack fa-lg”>
<i class=”fa fa-circle-thin fa-stack-2x”></i>
<i class=”fa fa-twitter fa-stack-1x”></i>
</span>

fa-twitter on fa-circle-thin <br>

<span class=”fa-stack fa-lg”>
<i class=”fa fa-circle fa-stack-2x”></i>
<i class=”fa fa-twitter fa-stack-1x fa-inverse”></i>
</span>

fa-twitter (inverse) on fa-circle <br>

<span class=”fa-stack fa-lg”>
<i class=”fa fa-camera fa-stack-1x”></i>
<i class=”fa fa-ban fa-stack-2x text-danger” style=”color:red;”></i>
</span>

fa-ban on fa-camera

fa-twitter on fa-circle-thin
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera

Fixed Width Icons

The fa-fw class is used to set icons at a fixed width. This class is useful when different icon widths throw off alignment. Especially useful in Bootstrap’s navlists and list groups.

Example:

<div class=”list-group”>
<a href=”#” class=”list-group-item”><i class=”fa fa-home fa-fw”></i> Home </a>
<a href=”#” class=”list-group-item”><i class=”fa fa-book fa-fw”></i> Library</a>
<a href=”#” class=”list-group-item”><i class=”fa fa-pencil fa-fw”></i> Applications</a>
<a href=”#” class=”list-group-item”><i class=”fa fa-cog fa-fw”></i> Settings</a>
</div>

Bootstrap

Font Awesome also works great with all the Bootstrap components.