THE WORLD'S LARGEST WEB DEVELOPER SITE

Icons Tutorial

Icons HOME Icons Reference

Font Awesome 5

Font Awesome 5 Intro Icons Accessibility Icons Alert Icons Animals Icons Arrows Icons Audio & Video Icons Automotive Icons Autumn Icons Beverage Icons Brands Icons Buildings Icons Business Icons Camping Icons Charity Icons Chat Icons Chess Icons Childhood Icons Clothing Icons Code Icons Communication Icons Computers Icons Construction Icons Currency Icons Date & Time Icons Design Icons Editors Icons Education Icons Emoji Icons Energy Icons Files Icons Finance Icons Fitness Icons Food Icons Fruits & Vegetables Icons Games Icons Genders Icons Halloween Icons Hands Icons Health Icons Holiday Icons Hotel Icons Household Icons Images Icons Interfaces Icons Logistics Icons Maps Icons Maritime Icons Marketing Icons Mathematics Icons Medical Icons Moving Icons Music Icons Objects Icons Payment & Shopping Icons Pharmacy Icons Political Icons Religion Icons Science Icons Science Fiction Icons Security Icons Shapes Icons Social Icons Spinners Icons Sports Icons Spring Icons Status Icons Summer Icons Tabletop Gaming Icons Toggle Icons Travel Icons Users & People Icons Vehicles Icons Weather Icons Winter Icons Writing

Font Awesome 4

Font Awesome Intro Icons Brand Icons Chart Icons Currency Icons Directional Icons File Type Icons Form Icons Gender Icons Hand Icons Medical Icons Payment Icons Spinner Icons Text Icons Transportation Icons Video Icons Web Application

Bootstrap

Icons BS Glyphicons

Google

Google Icons Intro Icons Action Icons Alert Icons AV Icons Communication Icons Content Icons Device Icons Editor Icons File Icons Hardware Icons Image Icons Maps Icons Navigation Icons Notification Icons Places Icons Social Icons Toggle


Font Awesome 5 Introduction


Font Awesome 5

Font Awesome 5 has a PRO edition with 7020 icons, and a FREE edition with 1535 icons. This tutorial will concentrate on the FREE edition.

To use the Free Font Awesome 5 icons, you can choose to download the Font Awesome library, or you can sign up for an account at Font Awesome, and get a code (called KIT CODE) to use when you add Font Awesome to your web page.

We prefer the KIT CODE approach. Once you get the code you can start using Font Awesome on your web pages by including only one line of HTML code:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

Example

We got the code a076d05399 and by inserting the script tag, with the code, we can start using Font Awesome:

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>

<i class="fas fa-clock"></i>

</body>
</html>

Results in:

Try It Yourself »

Note: No downloading or installation is required!


Get Your Own KIT CODE

Sign up and get your own code for free at:

fontawesome.com

New in Font Awesome 5

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:

Example

<i class="fas fa-clock"></i>
<i class="far fa-clock"></i>

Results in:

Try It Yourself »

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:

Try It Yourself »


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:

Try It Yourself »

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:

Try It Yourself »

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:

Try It Yourself »

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:

Try It Yourself »

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:

Try It Yourself »

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:

Try It Yourself »