Font awesome cheat sheet 🐱‍💻

I gathered 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 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. Most importat 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 make all icons bigger use this CSS:

i.fa {
  font-size: 30px
}

If you want to resize only 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 width that you need

Font awesome change icon on hover

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

11

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

#webfont #fontawesome
menu 4
Bruce Hardy profile picture
Dec 12, 2020
by Bruce Hardy

Best related

Other by Bruce Hardy