- Font Awesome 5 Free's Cheatsheet After you're set up on the desktop or in code, quickly copy and paste the glyph, name, or unicode value of any icon.
- Bootstrap Icons list. The biggest collection of free Bootstrap icons. Easy to use and customize. Available in different colors, shapes, and size.
This tutorial will concentrate on the FREE edition. To use the Free Font Awesome 5 icons, you can choose to download the Font Awesome library, or you can sign up for an account at Font Awesome, and get a code (called KIT CODE) to use when you add Font Awesome to your web page. We prefer the KIT CODE. Download now the free icon pack 'Font Awesome'. Available source files and icon fonts for both personal and commercial use. Download now this free icon pack from Flaticon, the largest database of free vector icons. Download now this free icon pack from Flaticon, the.
Font Awesome 5
Font Awesome 5 has a PRO edition with 7020 icons, and a FREE edition with 1535 icons. This tutorial will concentrate on the FREE edition.
To use the Free Font Awesome 5 icons, you can choose to download the Font Awesome library, or you can sign up for an account at Font Awesome, and get a code (called KIT CODE) to use when you add Font Awesome to your web page.
We prefer the KIT CODE approach. Once you get the code you can start using Font Awesome on your web pages by including only one line of HTML code:
Example
We got the code a076d05399 and by inserting the script tag, with the code, we can start using Font Awesome:
<html>
<head>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<i></i>
</body>
</html>
Results in:
Try It Yourself »Note: No downloading or installation is required!
Get Your Own KIT CODE
Sign up and get your own code for free at:
New in Font Awesome 5
New in Font Awesome 5 is the fas prefix, Font Awesome 4 uses fa.
The s in fas stands for solid, and some icons also have a regular mode, specified by using the prefix far:
Example
<i></i>
Results in:
Try It Yourself »Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons.
Also note that if you change the font-size or color of the icon's container, the icon changes. Same things goes for shadow, and anything else that gets inherited using CSS.
Example
<i></i>
Results in:
Try It Yourself »The fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, or fa-10x classes are used to adjust the icon sizes relative to their container.
Example
The following code:
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
Results in:
Try It Yourself »The fa-ul and fa-li classes are used to replace default bullets in unordered lists.
Example
The following code:
<li><span><i></i></span>List Item</li>
<li><span><i></i></span>List Item</li>
<li><span><i></i></span>List Item</li>
</ul>
Results in:
Try It Yourself »The fa-spin class gets any icon to rotate, and the fa-pulse class gets any icon to rotate with 8 steps.
Example
The following code:
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
Results in:
Try It Yourself »Note: IE8 and IE9 do not support CSS3 animations.
The fa-rotate-* and fa-flip-* classes are used to rotate and flip icons.
Example
The following code:
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
Results in:
Try It Yourself »To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x class for the regularly sized icon, and fa-stack-2x for the larger icon.
The fa-inverse class can be used as an alternative icon color. You can also add larger icon classes to the parent to further control the sizing.
Example
The following code:
<i></i>
<i></i>
</span>
fa-twitter (inverse) on fa-circle (solid)<br>
<span>
<i></i>
<i></i>
</span>
fa-twitter on fa-circle (regular)<br>
<span>
<i></i>
<i></i>
</span>
fa-ban on fa-camera
Results in:
Try It Yourself »Just like letters and other characters, icons can have different widths, and if you need to vertically align icons like in a list or a menu, this can be a problem.
The fa-fw class is used to set icons at a fixed width.
Example
<div><i></i> Icon 1</div>
<div><i></i> Icon 2</div>
<div><i></i> Icon 3</div>
<p>Without Fixed Width:</p>
<div><i></i> Icon 1</div>
<div><i></i> Icon 2</div>
<div><i></i> Icon 3</div>
Results in:
Try It Yourself »
The fa-border, fa-pull-right or fa-pull-left classes are used for for pull quotes or article icons.
Example
The following code:
Font Awesome Icons Png
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Results in:
Try It Yourself »How To Add Icons
To insert an icon, add the name of the icon class to any inline HTML element.
The <i> and <span> elements are widely used to add icons.
All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)
Font Awesome 5 Icons
To use the Free Font Awesome 5 icons, go to fontawesome.com and sign in to get a code to use in your web pages.
Read more about how to get started with Font Awesome in our Font Awesome 5 chapter.
Note: No downloading or installation is required!
Example
<html>
<head>
<script src='https://kit.fontawesome.com/yourcode.js'></script>
<!--Get your code at fontawesome.com-->
</head>
<body>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</body>
</html>
Font Awesome 4 Icons
To use the Font Awesome 4 icons, add the following line inside the <head> section of your HTML page:
Note: No downloading or installation is required!
Example
<html>
<head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>
<body>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</body>
</html>
Bootstrap 3 Icons
To use the Bootstrap 3 glyphicons, add the following line inside the <head> section of your HTML page:
Note: No downloading or installation is required!
Example
<html>
<head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</body>
</html>
Note: Glyphicons are not supported in Bootstrap 4.
For more information about Bootstrap 3 and Glyphicons, visit our Bootstrap 3 Tutorial.
Google Icons
To use the Google icons, add the following line inside the <head> section of your HTML page:
Note: No downloading or installation is required!
Example
<html>
<head>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons'>
</head>
<body>
<i>cloud</i>
<i>favorite</i>
<i>attachment</i>
<i>computer</i>
<i>traffic</i>
</body>
</html>
Font Awesome Free Font Awesome
Try It Yourself »Font Awesome Icons Code List Free Download For Pc
For a complete list of ALL icons (font awesome, bootstrap and google), visit the Icon Reference.