How to Use and Style Icons with Pure CSS: An Ultimate Guide
Table of Contents:
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.
Here, we will use the 5.8.1 version link rel to define the relationship between the current document and the linked file:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">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:
<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 <i> and the <span> tags to add icons on the webpages. So, if you don’t like when the site provides you the code with the <i> tag, you are free to change it into a <span>.
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 <i> element to reference the icon will be like this:
<i class="fas fa-camera"></i>Or use a span element to reference the icon such as the code below:
<span class="fas fa-camera"></span>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>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 <i> 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>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>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>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>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>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:
<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>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>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>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). |