WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Font Awesome Introduction


Basic Icons

We can simply use Font Awesome icons, add the following line inside the <head> section of your HTML page:

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

Note: No downloading or installation is required!

We can Font Awesome icons by using the prefix fa and the icon name.

Example

The following code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-birthday-cake"></i>
<i class="fa fa-university" style="font-size:48px;"></i>
<i class=fa fa-university" style="font-size:60px;color:blue;"></i>

</body>
</html>

Results in:

Try It Yourself »

Larger Icons

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

Example

The following code:

<i class="fa fa-university fa-lg"></i>
<i class="fa fa-university fa-2x"></i>
<i class="fa fa-university fa-3x"></i>
<i class="fa fa-university fa-4x"></i>
<i class="fa fa-university fa-5x"></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><i class="fa-li fa fa-university"></i>List icons</li>
  <li><i class="fa-li fa fa-birthday-cake fa-spin"></i>List icons</li>
  <li><i class="fa-li fa fa-birthday-cake"></i>List icons</li>
</ul>

Results in:

  • List icons
  • List icons
  • List icons
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="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Hello world!.

Results in:

Hello world!
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="fa fa-info-circle fa-spin"></i>
<i class="fa fa-eye-slash fa-spin"></i>
<i class="fa fa-warning fa-spin"></i>
<i class="fa fa-exclamation-triangle fa-spin"></i>
<i class="fa fa-plane 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="fa fa-plane"></i>
<i class="fa fa-plane fa-plane-90"></i>
<i class="fa fa-plane fa-rotate-180"></i>
<i class="fa fa-plane fa-plane-270"></i>
<i class="fa fa-plane fa-flip-horizontal"></i>
<i class="fa fa-plane 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. we can use by adding large icon classes to the parent to further control the sizing.

Example

The following code:

<span class="fa-stack fa-lg">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-shopping-cart fa-stack-1x"></i>
</span>
fa-shopping-cart on fa-circle-thin<br>

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
</span>
fa-shopping-cart (inverse) on fa-circle<br>

<span class="fa-stack fa-lg">
  <i class="fa fa-comment-o fa-stack-1x"></i>
  <i class="fa fa-umbrella fa-stack-2x text-danger" style="color:green;"></i>
</span>
fa-umbrella on fa-comment-o

Results in:

fa-shopping-cart on fa-circle-thin
fa-shopping-cart (inverse) on fa-circle
fa-umbrella on fa-comment-o
Try It Yourself »

Fixed Width Icons

The fa-fw class is used to set icons at a fixed width. This class is useful when different icon widths throw off alignment.

Example

<div class="list-group">
  <a href="#" class="list-group-item"><i class="fa fa-fighter-jet fa-fw"></i> fighter</a>
  <a href="#" class="list-group-item"><i class="fa fa-beer fa-fw"></i> beer</a>
  <a href="#" class="list-group-item"><i class="fa fa-medkit fa-fw"></i> medkit</a>
  <a href="#" class="list-group-item"><i class="fa fa-ambulance fa-fw"></i> ambulance</a>
</div>
Try It Yourself »