❮ Fontawesome Icons Chart Fontawesome Icons Payment ❯

Font Awesome Icons

Font Awesome is a fantastic icon font library and CSS framework.

Font Awesome fonts provide you with scalable vector icons that can be customized in size, color, shadow, and any style that can be achieved with CSS.

To use Font Awesome icons, include the following in your HTML page:

Recommended CDN for China:

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

Recommended CDN for Overseas:

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

Download to Local:

Download

Note: It is not recommended to download for installation; simply reference the CDN file in the head of your HTML document.

Note: This tutorial uses version 4.7.0.

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

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.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>

Result:

Click the "Try it Yourself" button to see the online example.

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 container, the icon will change accordingly.

Large Icons

The fa-lg (increases by 33%), fa-2x, fa-3x, fa-4x, or fa-5x classes are used to increase the icon size relative to its container.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>

<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>

</body>
</html>

Result:

Tip: If your icons are cut off at the top and bottom, increase the line height.

List Icons

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

Example

<ul class="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>

Result:

List icons
List icons
List icons

Bordered and Pulled Icons

The fa-border, fa-pull-right, or fa-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>
tutorialpro.org -- Not just learning technology, but also dreams!!!<br>
tutorialpro.org -- Not just learning technology, but also dreams!!!<br>
tutorialpro.org -- Not just learning technology, but also dreams!!!<br>
tutorialpro.org -- Not just learning technology, but also dreams!!!

Result:

tutorialpro.org -- Not just learning technology, but also dreams!!!
tutorialpro.org -- Not just learning technology, but also dreams!!!
tutorialpro.org -- Not just learning technology, but also dreams!!!
tutorialpro.org -- Not just learning technology, but also dreams!!!

Spinning Icons

The fa-spin class makes icons rotate, and the fa-pulse class makes icons rotate in 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>

Result:

Note: IE8 and IE9 do not support CSS3 animations.

Rotating and Flipping Icons

The fa-rotate-* and fa-flip-* classes are used for rotating and flipping 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>

Result:

Stacked Icons

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

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 size.

Example

<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

Result:

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 is useful when different icon widths cause alignment issues, especially in Bootstrap's navigation lists 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>

Result:

❮ Fontawesome Icons Chart Fontawesome Icons Payment ❯