Icons Tutorial
Icons Introduction
Font Awesome 5
Font Awesome 5 Intro Accessibility Icons Animals Icons Arrows Icons Audio & Video Icons Automotive Icons Autumn Icons Brands Icons Buildings Icons Business Icons Charity Icons Chat Icons Chess Icons Code Icons Communication Icons Computers Icons Currency Icons Date & Time Icons Design Icons Editors Icons Education Icons Emoji Icons Files Icons Food Icons Genders Icons Halloween Icons Hands Icons Health Icons Holiday Icons Images Icons Interfaces Icons Logistics Icons Marketing Icons Mathematics Icons Medical Icons Moving Icons Political Icons Religion Icons Shapes Icons Spinners Icons Sports Icons Tabletop Gaming Icons Travel Icons Users & People Icons Vehicles Icons Weather Icons Winter Icons Writing Icons
Font Awesome 4
Font Awesome 4 Intro Accessibility Icons Brand Icons Chart Icons Currency Icons Directional Icons File Type Icons Form Control Icons Gender Icons Hand Icons Medical Icons Payment Icons Spinner Icons Text Editor Icons Transportation Icons Video Player Icons Web Application Icons
Bootstrap 3
BS Glyphicons
Google
Google Icons Intro 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 Icons

Font Awesome 5 Introduction

Font Awesome 5 has a PRO edition with 5365 icons, and a FREE edition with 1534 icons.

In this tutorial we will concentrate on the FREE edition.


Font Awesome 5

Font Awesome 5 is designed to be used with inline elements like the <i> or <span>.

To use the Font Awesome 5 icons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">

Basic Usage

You can place Font Awesome icons just about anywhere using a style prefix (fas, far or fab) and the icon’s name.

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

<i class="fas fa-clock"></i> <i class="fas fa-closed-captioning"></i> <i class="fas fa-question-circle"></i> <i class="fas fa-fish"></i> <i class="fas fa-frog"></i>
Run code

Some icons also have far prefix for regular style:

<i class="far fa-clock"></i> <i class="far fa-closed-captioning"></i> <i class="far fa-question-circle"></i>
Run code

Some icons also have fab prefix for brands:

<i class="fab fa-facebook"></i> <i class="fab fa-google"></i> <i class="fab fa-android"></i> <i class="fab fa-instagram"></i> <i class="fab fa-twitter"></i> <i class="fab fa-font-awesome"></i>
Run code

If you change the font-size or color of the icon's container, the icon changes:

<span style="font-size:4rem; color:Mediumslateblue;"> <i class="fab fa-facebook"></i> </span> <span style="font-size:4em; color:#2ec866;"> <i class="fab fa-android"></i> </span> <span style="font-size:60px; color:Dodgerblue;"> <i class="fab fa-twitter"></i> </span> <span style="font-size:4em; color:Tomato;"> <i class="fas fa-frog"></i> </span>
Run code

The s in fas stands for solid.

The r in far stands for regular.

The b in fab stands for brand.



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.

fa-xs
fa-sm
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
fa-6x
fa-7x
<i class="fas fa-camera fa-xs"></i> <i class="fas fa-camera fa-sm"></i> <i class="fas fa-camera fa-lg"></i> <i class="fas fa-camera fa-2x"></i> <i class="fas fa-camera fa-3x"></i> <i class="fas fa-camera fa-4x"></i> <i class="fas fa-camera fa-5x"></i> <i class="fas fa-camera fa-6x"></i> <i class="fas fa-camera fa-7x"></i>
Run code

Icons inherit the font-size of their parent container which allow them to match any text you might use with them.

The following example shows how to increase the size of icons relative to that inherited font-size:

fa-xs
fa-sm
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
<div style="font-size: 2rem;"> <i class="fas fa-camera fa-xs"></i> <i class="fas fa-camera fa-sm"></i> <i class="fas fa-camera fa-lg"></i> <i class="fas fa-camera fa-2x"></i> <i class="fas fa-camera fa-3x"></i> <i class="fas fa-camera fa-4x"></i> <i class="fas fa-camera fa-5x"></i> </div>
Run code

Fixed Width Icons

Add a class of fa-fw on the HTML element referencing your icon to set one or more icons to the same fixed width.

This is great to use when varying icon widths (e.g. a tall but skinny icon atop a wide but short icon) would throw off vertical alignment).

Fixed Width:

Skating
Skiing
Snowplow

Without Fixed Width:

Skating
Skiing
Snowplow
<div style="font-size: 2rem;"> <div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div> <div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div> <div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div> </div>
Run code

Icons in a List

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

  • List icons can
  • be used to
  • replace bullets
  • in lists
<ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li> <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li> <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li> <li><span class="fa-li"><i class="fas fa-square"></i></span>in lists</li> </ul>
Run code

Rotated & Flipped Icons

Sometimes you need to rotate, flip, or mirror an icon for it to work in your project or design.

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes when you reference an icon.

<i class="fas fa-home"></i> <i class="fas fa-home fa-rotate-90"></i> <i class="fas fa-home fa-rotate-180"></i> <i class="fas fa-home fa-rotate-270"></i> <i class="fas fa-home fa-flip-horizontal"></i> <i class="fas fa-home fa-flip-vertical"></i>
Run code

Animating Icons

Use the fa-spin class to get any icon to rotate, and use fa-pulse to have it rotate with 8 steps.

<div class="fa-3x"> <i class="fas fa-spinner fa-spin fa-fw"></i> <i class="fas fa-circle-notch fa-spin fa-fw"></i> <i class="fas fa-sync-alt fa-spin fa-fw"></i> <i class="fas fa-cog fa-spin fa-fw"></i> <i class="fas fa-cog fa-pulse fa-fw"></i> <i class="fas fa-spinner fa-pulse fa-fw"></i> </div>
Run code

Bordered & Pulled Icons

Use fa-pull-right or fa-pull-left for easy pull quotes or article icons.

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.
<i class="fas fa-quote-left fa-pull-left fa-3x"></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.
Run code

Use fa-border in combination with pulled icon styles for more visual separation.

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.
<i class="fas fa-arrow-right fa-pull-right fa-border fa-3x"></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.
Run code

Stacking Icons

To stack multiple icons, use the fa-stack class on the parent HTML element of the 2 icons you want to stack.

Then add the fa-stack-1x class for the regularly sized icon and add the fa-stack-2x class for the larger icon.

The fa-inverse can be added to the icon with the fa-stack-1x to help with a knock-out looking effect.

fa-twitter on fa-square
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera + (red color)
<span class="fa-stack fa-lg"> <i class="fas fa-square fa-stack-2x"></i> <i class="fab fa-twitter fa-stack-1x fa-inverse"></i> </span> fa-twitter on fa-square<br> <span class="fa-stack fa-lg"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-flag fa-stack-1x fa-inverse"></i> </span> fa-flag on fa-circle<br> <span class="fa-stack fa-lg"> <i class="fas fa-square fa-stack-2x"></i> <i class="fas fa-terminal fa-stack-1x fa-inverse"></i> </span> fa-terminal on fa-square<br> <span class="fa-stack fa-lg"> <i class="fas fa-camera fa-stack-1x"></i> <i class="fas fa-ban fa-stack-2x" style="color:red;"></i> </span> fa-ban on fa-camera + (red color)
Run code