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 Introduction

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

To use the Font Awesome icons, add 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">

Basic Icons

You can place Font Awesome icons just about anywhere using the prefix fa and the icon's name.

<i class="fa fa-camera"></i> <i class="fa fa-camera" style="font-size:2em;"></i> <i class="fa fa-camera" style="font-size:3em; color:blue;"></i> <i class="fa fa-camera" style="font-size:4em; color:coral;"></i>
Run code

Note that if you change the font-size or color of the icon's container, the icon changes.


Sizing Icons

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

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
<i class="fa fa-camera fa-lg"></i> <i class="fa fa-camera fa-2x"></i> <i class="fa fa-camera fa-3x"></i> <i class="fa fa-camera fa-4x"></i> <i class="fa fa-camera fa-5x"></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-lg
fa-2x
fa-3x
fa-4x
fa-5x
<div style="font-size: 2rem;"> <i class="fa fa-camera fa-lg"></i> <i class="fa fa-camera fa-2x"></i> <i class="fa fa-camera fa-3x"></i> <i class="fa fa-camera fa-4x"></i> <i class="fa 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. Especially useful in Bootstrap's list groups.

<i class="fa fa-briefcase fa-fw"></i> <i class="fa fa-home fa-fw"></i> <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-phone fa-fw"></i>
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="fa fa-check-square"></i></span>List icons can</li> <li><span class="fa-li"><i class="fa fa-check-square"></i></span>be used to</li> <li><span class="fa-li"><i class="fa fa-spinner fa-pulse"></i></span>replace bullets</li> <li><span class="fa-li"><i class="fa 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="fa fa-home"></i> <i class="fa fa-home fa-rotate-90"></i> <i class="fa fa-home fa-rotate-180"></i> <i class="fa fa-home fa-rotate-270"></i> <i class="fa fa-home fa-flip-horizontal"></i> <i class="fa 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="fa fa-spinner fa-spin fa-fw"></i> <i class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i class="fa fa-refresh fa-spin fa-fw"></i> <i class="fa fa-cog fa-spin fa-fw"></i> <i class="fa 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="fa 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="fa 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-o
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="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span> fa-twitter on fa-square-o<br> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse"></i> </span> fa-flag on fa-circle<br> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse"></i> </span> fa-terminal on fa-square<br> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x" style="color:red;"></i> </span> fa-ban on fa-camera + (red color)
Run code

Applying Custom CSS to Icons

Anything you can do with CSS font styles, you can do with Font Awesome icons.

<div class="box"> <i style="color:#ff0066;" class="fa fa-thumbs-o-up fa-fw"></i> <i style="color:#4caf50;" class="fa fa-thumbs-down fa-fw"></i> <i style="color:teal;" class="fa fa-thumbs-o-down fa-fw"></i> <i class="fa fa-thumbs-up fa-fw"></i> </div>
Run code