Font awesome gives you over 600+ scalable vector icons. You can use them in website design.
The font awesome icons can instantly customize through CSS (Cascading style sheet).
You can change the size, color, rotation, shadows pretty much anything. These days’ font awesome has become very popular for adding icons in websites.
After this quick tutorial, you will be able to use any type of font icons in your design like Bootstrap Glyphicons, Fontello etc.
#1 Download and Install Font awesome
First, you need to download latest font awesome kit from their website.
Go to https://fontawesome.com/free then click on start using button.
#2 Use Font Awesome’s FREE CDN
Forget managing files and start using icons right away. Use the CDN to deliver a cached version of Font Awesome to your project.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
Call Font Awesome in Your Files
Place the code, which contains everything you need, within the
of each template or page that you want to use Font Awesome on.
#3 Choose which Font awesome you want to use.
- After Installation you need to open font awesome cheat sheet click Here to open.
- Select any icon you want to use and copy it (Ctrl+C or Cmd + C). I am using heart icon (fa-heart-o)
You can place Font Awesome icons just about anywhere using a style prefix and the icon’s name.
Font Awesome is designed to be used with inline elements and we recommend sticking with a consistent HTML element to reference them by in your project.
We like the
tag for brevity and for the fact that most folks are using
for emphasized/italicized semantic text these days. If that’s not your cup of tea, using a
is more semantically correct.
You need to know two bits of information to reference an icon, 1) its name, prefixed with
fa- and 2. the style you want to use’s corresponding prefix.
<i class="fas fa-stroopwafel"></i> <i class="fas fa-stroopwafel"></i> <span class="fas fa-stroopwafel"></span>
Font Awesome Icons + Your Project’s Styling
As always, Font Awesome icons automatically inherit CSS size and color. This means they blend in with text inline wherever you put them.
Font Awesome tries not to be too opinionated, and sets just the basic styling rules icons need to render properly in context.
<span style="font-size: 3em; color: Tomato;"> <i class="fas fa-stroopwafel"></i> </span> <span style="font-size: 48px; color: Dodgerblue;"> <i class="fas fa-stroopwafel"></i> </span> <span style="font-size: 3rem;"> <span style="color: Mediumslateblue;"> <i class="fas fa-stroopwafel"></i> </span> </span>