Font Awesome 5 Introduction
Font Awesome 5
Font Awesome 5 has a PRO edition with 4845 icons, and a FREE edition with 1480 icons. This tutorial will concentrate on the FREE edition.
To use the Free Font Awesome 5 icons, add the following <link> element inside the <head>
section of your HTML page and display icons by using a class attribute with the prefix fas followed by the the icon's name.
Example
The following code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
</head>
<body>
<i class="fas fa-clock"></i>
</body>
</html>
Results in:
Note: No downloading or installation is required!
New in Font Awesome 5 is the fas prefix,
Font Awesome 4 uses fa.
The s in fas
stands for solid, and some icons also have a regular mode,
specified by using the prefix far:
Font Awesome is designed to be used with inline elements. The <i> 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.
Example
<i class="fas fa-clock" style="font-size:120px;color:#2196F3"></i>
<i class="far fa-clock" style="font-size:120px;color:#2196F3"></i>
Results in:
Sizing Icons
The
fa-xs,
fa-sm,
fa-lg,
fa-2x,
fa-3x,
fa-4x,
fa-5x,
fa-6x,
fa-7x,
fa-8x,
fa-9x,
or fa-10x classes are used to adjust the icon sizes relative to their container.
Example
The following code:
<i class="fas fa-clock fa-xs"></i>
<i class="fas fa-clock fa-sm"></i>
<i class="fas fa-clock fa-lg"></i>
<i class="fas fa-clock fa-2x"></i>
<i class="fas fa-clock fa-5x"></i>
<i class="fas fa-clock fa-10x"></i>
Results in:
List Icons
The fa-ul and fa-li classes are used to replace default bullets in unordered lists.
Example
The following code:
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List
Item</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>List
Item</li>
<li><span class="fa-li"><i class="fas fa-square"></i></span>List
Item</li>
</ul>
Results in:
Animated Icons
The fa-spin class gets any icon to rotate, and the fa-pulse
class gets any icon to rotate with 8 steps.
Example
The following code:
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync-alt fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
<i
class="fas fa-spinner fa-pulse"></i>
Results in:
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
The following code:
<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-rotate-180"></i>
<i class="fas fa-horse fa-rotate-270"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>
Results in:
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.
Example
The following code:
<span class="fa-stack fa-lg">
<i class="fas fa-circle
fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle (solid)<br>
<span class="fa-stack
fa-lg">
<i class="far fa-circle fa-stack-2x"></i>
<i
class="fab fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle
(regular)<br>
<span class="fa-stack fa-lg">
<i class="fas fa-camera
fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x text-danger"
style="color:red;"></i>
</span>
fa-ban on fa-camera
Results in:
Fixed Width Icons
Just like letters and other characters, icons can have different widths, and if you need to vertically align icons like in a list or a menu, this can be a problem.
The fa-fw class is used to set icons at a
fixed width.
Example
<p>Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v fa-fw"></i> Icon
1</div>
<div><i class="fas fa-band-aid fa-fw"></i> Icon
2</div>
<div><i
class="fab fa-bluetooth-b fa-fw"></i> Icon 3</div>
<p>Without Fixed
Width:</p>
<div><i class="fas fa-arrows-alt-v"></i> Icon 1</div>
<div><i
class="fas fa-band-aid"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b"></i> Icon
3</div>
Results in:
Try It Yourself »
Bordered and Pulled Icons
The fa-border, fa-pull-right or fa-pull-left
classes are used for for pull quotes or article icons.
Example
The following code:
<i class="fas 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.
Results in:
