Font awesome cheat sheet 🐱‍💻

I gathered the most popular questions about using font-awesome. Use Ctrl+F to find your question😉

How to include font awesome

To use font awesome in HTML you have to include some files.

To include font-awesome 4.x.x, add this CSS file in head:

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

To include font-awesome 5.x.x, add this js file into the head section:

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"></script>

How to resize font awesome icons

To make font awesome icon bigger or smaller you need to add a CSS rules. The most important is to define icon selectors correctly.

For font-awesome 4.x.x

Version 4 looks like CSS file, for example https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

<i class="fa fa-twitter"></i>

If you want to make all icons bigger use this CSS:

i.fa {
  font-size: 30px
}

If you want to resize only a specific icon:

i.fa-twitter {
  font-size: 30px
}

For font-awesome 5.x.x

FOr font-awesome 5 you most likely using js file, for example, https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js)

This js file dynamically replaces i tags with svg. So you can't use font-size, but can use transform property to increase size.

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

For all icons:

svg[data-icon] {
  transform: scale(2) /* x2 size */
}

For specific:

svg.fa-user {
    transform: scale(2)
}

How to center font awesome icon

Add text-align: center for holding container:

<div style="text-align: center">
  <i class="fa fa-twitter"></i>
</div>

Works same for 4.x.x and 5.x.x. But don't remember that 5.x.x has no fa, but fas, fab etc for different categories:

<div style="text-align: center">
  <i class="fas fa-user"></i>
</div>

Also, make sure that the parent container has the width that you need

Font awesome change icon on hover

E.g. to make it bigger (4.x.x):

i.fa:hover {
  transform: scale(2);
  transition: 0.2s;
}

For 5.x.x replace i.fa with your category class (e.g. svg[data-icon])

How to change color for font-awesome icon

Version 4.x.x:

i.fa-twitter {
   color: red
}

Version 5:

svg.fas-user {
  color: red
}

How to rotate font awesome icon

Version 4.x.x:

/* all icons on page */
i.fa {
   transform: rotate(-90deg);
}
/* or specific icon */
i.fa-user {
   transform: rotate(-90deg);
}

Version 5.x.x:

/* all icons on page */
svg[data-icon] {
 transform: rotate(-90deg);
}

/* or specific */
svg.fa-user {
    transform: scale(2);
}

How to find font awesome save icon

Version 4.x.x:

<i class="fa fa-floppy-o" aria-hidden="true"></i>

Version: 5.x.x:

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

How to edit icon in font awesome

1. Install Figma plugin to get font-awesome icons figma.com/community/plugin/774202616885508874/Font-Awesome-Icons

2. Create Figma file and put an icon.

3. Edit icon:

4. Click Export Icon:

5. Use this method to generate a webfont from the downloaded icon