Menu
Basic Icons
To use the Font Awesome icons, add the following line inside the
<head>
section of your HTML page:<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
Note: No downloading or installation is required!
These docs are for v3.2.1, which is no longer officially supported. Check out the latest version of Font Awesome! Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Font Awesome works just as well without Bootstrap. Copy the font-awesome directory into your project. Follow the above directions and skip the Bootstrap parts. Open your project's font-awesome.less or font-awesome.min.css and edit the font location to point it to your font directory (see above examples). Font awesome Cheat sheet. Fontawesome Cheatsheet. This is a font awesome cheatsheet. I made this because I found myself misclicking alot and not finding what I want on the original cheatsheet. Dotnet add package FontAwesome -version 3.2.1 For projects that support PackageReference, copy this XML node into the project file to reference the package. Font Awesome, the iconic font designed for Bootstrap.
You place Font Awesome icons by using the prefix
fa
Robofont 1 8 4. and the icon's name.Example
The following code:
<!DOCTYPE html>
<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>
</body>
</html>
<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>
</body>
</html>
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.
The
fa-lg
(33% increase), fa-2x
, fa-3x
, fa-4x
, or fa-5x
classes are used to increase the icon sizes relative to their container.Example
The following code:
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
Font Awesome 4.7 Icons
Results in:
Try It Yourself »Tip: If your icons are getting chopped off on top and bottom, increase the line-height.
The
fa-ul
and fa-li
classes are used to replace default bullets in unordered lists.Example
The following code:
<ul>
<li><i></i>List icons</li>
<li><i></i>List icons</li>
<li><i></i>List icons</li>
</ul>
<li><i></i>List icons</li>
<li><i></i>List icons</li>
<li><i></i>List icons</li>
</ul>
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:
<i></i>
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.
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:
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.
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>
<i></i>
<i></i>
<i></i>
<i></i>
Download duplicate file finder pro 5 1. Results in:
Try It Yourself »Font Awesome 3.2 1 Icons
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>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
Results in:
![Font Font](https://4.bp.blogspot.com/_w8BLipZDmNc/TOgVoRkQ99I/AAAAAAAAGNA/RFAQAzDQOoY/s1600/Saaya+311.jpg)
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:
<span>
<i></i>
<i></i>
</span>
fa-twitter on fa-circle-thin<br>
<span>
<i></i>
<i></i>
</span>
fa-twitter (inverse) on fa-circle<br>
<span>
<i></i>
<i></i>
</span>
fa-ban on fa-camera
<i></i>
<i></i>
</span>
fa-twitter on fa-circle-thin<br>
<span>
<i></i>
<i></i>
</span>
fa-twitter (inverse) on fa-circle<br>
<span>
<i></i>
<i></i>
</span>
fa-ban on fa-camera
Results in:
fa-twitter on fa-circle-thin
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Font Awesome 3.2 1 Cheat Sheet
Try It Yourself »The
fa-fw
class is used to set icons at a fixed width. This class is useful when different icon widths throw off alignment. Especially useful in Bootstrap's navlists and list groups.Font Awesome 3 Icons
Example
<div>
<a href='#'><i></i> Home</a>
<a href='#'><i></i> Library</a>
<a href='#'><i></i> Applications</a>
<a href='#'><i></i> Settings</a>
</div>
Try It Yourself »<a href='#'><i></i> Home</a>
<a href='#'><i></i> Library</a>
<a href='#'><i></i> Applications</a>
<a href='#'><i></i> Settings</a>
</div>
Font Awesome also works great with all the Bootstrap components.