How to Use and Style Icons with Pure CSS: An Ultimate Guide

Steps to Start Using Icons

To use icons for your website, you need to follow the steps below:

Set up on your site

Copy the code provided by Font Awesome website into the <head> of each template or page where you want to use Font Awesome icons.

Tip

For using the latest version of font awesome icons check this page.

Here, we will use the 5.8.1 version link rel to define the relationship between the current document and the linked file:

How to Use and Style Icons with CSS: An Ultimate Guide

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Info

No downloading or installation is required.

Add icons to your UI

The icons should be placed in the <body> element. Find your preferred icon and copy the HTML code of it.

The code of the icon will look like this:

How to Use and Style Icons with CSS: An Ultimate Guide

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

Style Your Icons

One can easily change the size and the color of an icon, even add shadows to it by using just CSS. It is also possible to have moved and animated icons. We will cover these all below.

How to Use Font Awesome Icons

Icons can be placed nearly anywhere using a style prefix (fa) and the name of the icon. Font Awesome is used with inline elements, and it is recommended that you stick to them in a project with a consistent HTML element.

It is acceptable to use the  and the  tags to add icons on the webpages. So, if you don’t like when the site provides you the code with the  XFI14  tag, you are free to change it into a  XFI15 .

To reference an icon you need to use its name, prefixed with fa- and your preferred style corresponding prefix (fas, fal, far or fab).

Using an  XFI16  element to reference the icon will be like this:

How to Use and Style Icons with CSS: An Ultimate Guide

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

Or use a span element to reference the icon such as the code below:

How to Use and Style Icons with CSS: An Ultimate Guide

<span class="fas fa-camera"></span>

Warning

The fa prefix has been deprecated in version 5. The new default prefix is the fas for solid style, the fab style for brands, far for regular style and fal for light style.

Example of adding Font Awesome icons:

<!DOCTYPE html>
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
  </head>
  <body>
    <h2>Icons example</h2>
    <p>Camera</p>
    <i class="fas fa-camera"></i>
    <p>Car</p>
    <i class="fas fa-car"></i>
    <p>Envelope</p>
    <i class="fas fa-envelope"></i>
  </body>
</html>

Try it Yourself »

How to Size Font Awesome Icons and Give Colors to Them

Icons inherit the font size of their parent container to match any text that you may use with them. You can increase or decrease the size of icons relative to the inherited font size with classes such as fa-xs, fa-sm, fa-lg, fa-2x, etc.

As for the color, it can be set using the CSS color property. You just need to set your icons in a <div> element and define the color for it in your style or just give a style to your  XFI17  element.

Example of styling Font Awesome icons:

<!DOCTYPE html>
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      div {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Icons example with specified size and color</h2>
    <div>
      <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-5x"></i>
      <i class="fas fa-camera fa-7x"></i>
      <i class="fas fa-camera fa-10x"></i>
    </div>
  </body>
</html>

Try it Yourself »

Here find the sizing scale details:

Class	Size
fa-xs	.75em
fa-sm	.875em
fa-lg	1.33em
fa-2x	2em
fa-3x	3em
fa-4x	4em
fa-5x	5em
fa-6x	6em
fa-7x	7em
fa-8x	8em
fa-9x	9em
fa-10x	10em

It is also possible to directly style the size of an icon by setting the font-size in the icon’s external style or directly in the style attribute of the HTML element referencing the icon.

Example of setting the size of Font Awesome icons:

<!DOCTYPE html>
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      i {
        color: #8ebf42;
      }
      .star {
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <h2>Icons example with font-size and color</h2>
    <div>
      <p>Default size icon.</p>
      <i class="fas fa-star"></i>
      <p>Font-size: 2em;</p>
      <i class="fas fa-star star"></i>
    </div>
  </body>
</html>

Try it Yourself »

How to Use Icons with Buttons

You can also add these icons while creating buttons. Just insert the icon in the <button> element.

Example of adding buttons with icons:

<!DOCTYPE html>
<html>
  <head>
    <title>Buttons with icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      button {
        border: none;
        border-radius: 5px;
        color: #ffffff;
        padding: 10px 14px;
        font-size: 16px;
        cursor: pointer;
      }
      button:hover {
        background-color: #666666;
        box-shadow: 2px 4px #999999;
      }
      .btn {
        background-color: #999999;
      }
      .home {
        background-color: #ff6347;
      }
      .menu {
        background-color: #008080;
      }
      .about {
        background-color: #e6b800;
      }
    </style>
  </head>
  <body>
    <h2>Buttons with icons</h2>
    <p>Icon buttons:</p>
    <button class="btn">
      <i class="fa fa-home"></i>
    </button>
    <button class="btn">
      <i class="fa fa-bars"></i>
    </button>
    <button class="btn">
      <i class="fas fa-info-circle"></i>
    </button>
    <p>Icon buttons with text and different colors:</p>
    <button class="home">
      <i class="fa fa-home"></i> Home
    </button>
    <button class="menu">
      <i class="fa fa-bars"></i> Menu
    </button>
    <button class="about">
      <i class="fas fa-info-circle"></i> About
    </button>
  </body>
</html>

Try it Yourself »

How to Add Shadow Effects to Icons

For having shadow effects on icons, the CSS text-shadow property is necessary.

Define the shadow for the element to which the icon is referenced like this:

Example of adding shadow effects on icons:

<!DOCTYPE html>
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      i {
        color: #1c87c9;
        text-shadow: 2px 2px 4px #00ffff;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Icons with text shadow example</h2>
    <div>
      <i class="fas fa-apple-alt"></i>
      <i class="fas fa-car"></i>
      <i class="fas fa-star-half-alt"></i>
      <i class="far fa-smile"></i>
      <i class="fas fa-paw"></i>
      <i class="fas fa-globe-asia"></i>
    </div>
  </body>
</html>

Try it Yourself »

How to Use Font Awesome Icons in a List

With icons, it is possible to do awesome things! You can style your HTML lists with icons as decorative bullets.

For that purpose, use fa-ul class for the <ul> element and fa-li class for the <li> element to replace the default bullets in unordered lists.

Example of using Font Awesome icons in a list:

<!DOCTYPE html>
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      span {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Icons in a list example</h2>
    <ul class="fa-ul">
      <li>
        <span class="fa-li">
        <i class="fas fa-check-double"></i>
        </span>List item 1
      </li>
      <li>
        <span class="fa-li">
        <i class="fas fa-check-circle"></i>
        </span>List item 2
      </li>
      <li>
        <span class="fa-li">
        <i class="fas fa-check-square"></i>
        </span>List item 3
      </li>
      <li>
        <span class="fa-li">
        <i class="fas fa-tasks"></i>
        </span>List item 4
      </li>
    </ul>
  </body>
</html>

Try it Yourself »

How to Animate Font Awesome Icons

Make the icons spin and pulse by using the fa-spin class to get an icon to rotate, and the fa-pulse class to have it rotate with 8 steps. Works especially well with fa-spinner.

Here is how it should be:

How to Use and Style Icons with CSS: An Ultimate Guide

<i class="fas fa-spinner fa-spin"></i>

Try the example below to see the difference between the fa-spin and the fa-pulse classes.

Example of animating Font Awesome icons:

<!DOCTYPE html>
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      i {
        color: #1c87c9;
        text-shadow: 2px 2px 4px #00ffff;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Icons with the fa-spin and fa-pulse classes</h2>
    <p>Spinner spin:</p>
    <i class="fas fa-spinner fa-spin"></i>
    <p>Spinner pulse:</p>
    <i class="fas fa-spinner fa-pulse"></i>
  </body>
</html>

Try it Yourself »

See another example with several animated icons.

Example of animating various icons:

<!DOCTYPE html>
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      i {
        color: #1c87c9;
        text-shadow: 2px 2px 4px #00ffff;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Icons with animation</h2>
    <i class="fas fa-spinner fa-pulse"></i>
    <i class="fas fa-star fa-spin"></i>
    <i class="fas fa-sync fa-spin"></i>
    <i class="fas fa-haykal fa-spin"></i>
    <i class="fas fa-stroopwafel fa-pulse"></i>
    <i class="fas fa-car fa-spin"></i>
  </body>
</html>

Try it Yourself »

How to Rotate Font Awesome Icons

It is often needed to rotate, flip, or mirror an icon for a great design, that’s why some quick utilities are included to help with that.

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

Example of rotating Font Awesome icons:

<!DOCTYPE html>
<html>
  <head>
    <title>Font Awesome Icons</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
    <style>
      i {
        color: #1c87c9;
        text-shadow: 2px 2px 4px #00ffff;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Icons with rotation</h2>
    <i class="fas fa-star-half-alt"></i>
    <i class="fas fa-star-half-alt fa-rotate-90"></i>
    <i class="fas fa-star-half-alt fa-rotate-180"></i>
    <i class="fas fa-star-half-alt fa-rotate-270"></i>
    <i class="fas fa-star-half-alt fa-flip-horizontal"></i>
    <i class="fas fa-star-half-alt fa-flip-vertical"></i>
    <i class="fas fa-star-half-alt fa-flip-both"></i>
  </body>
</html>

Try it Yourself »

Here find the rotation amount details:

Class	Rotation Amount
fa-rotate-90	90°
fa-rotate-180	180°
fa-rotate-270	270°
fa-flip-horizontal	Mirrors icon horizontally.
fa-flip-vertical	Mirrors icon vertically.
fa-flip-both	Mirrors icon vertically and horizontally (requires 5.7.0 or greater versions).

Table of Contents:

Steps to Start Using Icons

Set up on your site

Add icons to your UI

Style Your Icons

How to Use Font Awesome Icons

Example of adding Font Awesome icons:

How to Size Font Awesome Icons and Give Colors to Them

Example of styling Font Awesome icons:

Example of setting the size of Font Awesome icons:

How to Use Icons with Buttons

Example of adding buttons with icons:

How to Add Shadow Effects to Icons

Example of adding shadow effects on icons:

How to Use Font Awesome Icons in a List

Example of using Font Awesome icons in a list:

How to Animate Font Awesome Icons

Example of animating Font Awesome icons:

Example of animating various icons:

How to Rotate Font Awesome Icons

Example of rotating Font Awesome icons: