Font awesome cheat sheet 🐱‍💻

#StandWithUkraine
Today, 4th December 2022, Ukraine is still bravely fighting for democratic values, human rights and peace in whole world. Russians ruthlessly kill all civilians in Ukraine including childs and destroy their cities. We are uniting against Putin’s invasion and violence, in support of the people in Ukraine. You can help by donating to Ukrainian's army.

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

center font awesome icon

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>

fa fa-floppy-o

Version: 5.x.x:

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

fas fa-save

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:

Edit icon in figma

4. Click Export Icon:

Figma Export Icon

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

#webfont #fontawesome
4
Bruce Hardy profile picture
Dec 12, 2020
by Bruce Hardy
Did it help you?
Yes !
No

Best related