Font Awesome 4 Icons

How To Add Icons

To use the Font Awesome icons, add the following line inside the  section of your HTML page:

Note: No downloading or installation is required!

You place Font Awesome icons by using the prefix fa and the icon's name.

Font Awesome is designed to be used with inline elements. The  and  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.

Larger Icons

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.

Tip: If your icons are getting chopped off on top and bottom, increase the line-height.

List Icons

The fa-ul and fa-li classes are used to replace default bullets in unordered lists.

Bordered and Pulled Icons

The fa-border, fa-pull-right or fa-pull-left classes are used for for pull quotes or article icons.

Animated Icons

The fa-spin class gets any icon to rotate, and the fa-pulse class gets any icon to rotate with 8 steps.

Rotated and Flipped Icons

The fa-rotate-* and fa-flip-* classes are used to rotate and flip icons.

Stacked Icons

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.

Fixed Width Icons

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.