Font Awesome tutorial

Font Awesome Icons

Font Awesome is an excellent icon font library and CSS framework.

Font Awesome fonts provide scalable vector icons that can be customized in size, color, shadow, and any style that can be applied with CSS.

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

1and recommended CDN in China:

<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

2and recommended CDN abroad

<link　rel="stylesheet"　href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Note: It is not recommended to download and install it, you can simply reference the CDN file in the head of the html document.
Note: This tutorial uses 4.7.0 version.

You can use the prefix 'fa' and the name of the icon to place Font Awesome icons.

Online examples

Example

!DOCTYPE html
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-car></i>
<i class="fa fa-car" style="font-size:48px;</i>
<i class="fa fa-car" style="font-size:60px;color:red;</i>
　
</body>
</html>

Test and see ‹/›

Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons.

Additionally, if you change the font size or color of the icon container, the icon will change.

Large icon

fa-lg (increase33%),fa-2x,fa-3x, fa-4x, or fa-5The 'x' class is used to increase the icon size relative to its container.

Example

!DOCTYPE html
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
　
</body>
</html>

Test and see ‹/›

Tip: If your icon is cut off at the top and bottom, please increase the line height.

List icons

fa-ul and fa-The li class is used to replace the default prefix in unordered lists.

Example

!DOCTYPE html
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<ul class="fa-ul">
　　<li><i class="fa-li fa fa-check-square"></i>List icons</li>
　　<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
　　<li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>
　
</body>
</html>

Test and see ‹/›

The effect after running is as follows:

boundaries and icons being pulled

fa-border, fa-pull-right or fa-pull-left class is used for pull quotes or article icons.

Example

!DOCTYPE html
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Basic Tutorial　--　Learn the basics and you can go further!!!<br>
Basic Tutorial　--　Learn the basics and you can go further!!!<br>
Basic Tutorial　--　Learn the basics and you can go further!!!<br>
Basic Tutorial　--　Learn the basics and you can go further!!!
　
</body>
</html>

Test and see ‹/›

The effect after running is as follows:

dynamic icons

fa-The spin class can make the icon rotate, fa-The pulse class can make the icon rotate at 8 step for rotation. The pulse class can make the icon rotate

Example

!DOCTYPE html
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
　
</body>
</html>

Test and see ‹/›

The effect after running is as follows:

Note: IE8 and IE9 Not supported by CSS3 animation.

rotating and flipping icons

fa-rotate-* and fa-flip-* class is used for rotating and flipping icons.

Example

!DOCTYPE html
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>
　
</body>
</html>

Test and see ‹/›

The effect after running is as follows:

Stacked icons

To stack multiple icons, please use the fa on the parent level.-stack class, fa-stack-1x class is used for icons of regular size, fa-stack-2x is used for larger icons.

fa-The inverse class can be used as a substitute for icon color. You can also add a larger icon class to the parent to further control the size.

Example

!DOCTYPE html
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<span class="fa-stack fa-lg">
　　<i class="fa fa-circle-thin fa-stack-2x"></i>
　　<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
　
<span class="fa-stack fa-lg">
　　<i class="fa fa-circle fa-stack-2x"></i>
　　<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>
　
<span class="fa-stack fa-lg">
　　<i class="fa fa-camera fa-stack-1x"></i>
　　<i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban on fa-camera
　
</body>
</html>

Test and see ‹/›

The effect after running is as follows:

Fixed Width Icon

fa-The fw class is used to set the fixed width of icons. It is very useful when different icons have widths that deviate from alignment. It is especially suitable for Bootstrap navigation lists and list groups.

Example

!DOCTYPE html
<html>
<head>
<meta　name="viewport"　content="width=device-width, initial-scale=1">
<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<p>With fixed width:</p>
<div　class="list-group">
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-home fa-fw></i>　Home</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-book fa-fw></i>　Library</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-pencil fa-fw></i>　Applications</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-cog fa-fw></i>　Settings</a>
</div>
<p>Without fixed width:</p>
<div　class="list-group">
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-home"></i>　Home</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-book"></i>　Library</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-pencil"></i>　Applications</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-cog"></i>　Settings</a>
</div>
　
</body>
</html>

Test and see ‹/›

The effect after running is as follows:

Font Awesome Brand Icons