10.1. Font Awesome icon

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

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

To use the Font Awesome icon, please recommend CDN in 1. Domestic HTML page:

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

2.Overseas recommended CDN

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

3.Download directly to the local

Download

Note: it is not recommended to download and install, just reference the CDN file directly in the html document header.

Note: this tutorial uses version 4.7.0.

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

10.1.1. Example ¶

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

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

Also note that if you change the font size or color of the icon container, the icon will change.

Large icon ¶

Fa-lg (33% increase), fa-2x,fa-3x, fa-4x, or fa-5x classes are used to increase the size of icons relative to their containers.

10.1.2. Example ¶

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

Tip: if your icon is cut off at the top and bottom, please increase the lineheight.

List icon ¶

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

10.1.3. Example ¶

<ulclass="fa-ul"><li><iclass="fa-li fa fa-check-square"></i>List
icons</li><li><iclass="fa-li fa fa-spinner fa-spin"></i>List
icons</li><li><iclass="fa-li fa fa-square"></i>List icons</li></ul>

Results:

List icons
List icons
List icons

Boundaries and pulled icons ¶

fa-border ， fa-pull-right , or fa full left classes are used for pull referencing or article icons.

10.1.4. Example ¶

<iclass="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>Rookie Tutorial --
Learning Not Only Techniques, But Dreams！！！<br>Rookie Tutorial --
Learning Not Only Techniques, But Dreams！！！<br>Rookie Tutorial --
Learning Not Only Techniques, But Dreams！！！<br>Rookie Tutorial --
Learning Not Only Techniques, But Dreams！！！

Results:

Rookie Tutorial - Learning Not Only Techniques, But Dreams！！！
Rookie Tutorial - Learning Not Only Techniques, But Dreams！！！
Rookie Tutorial - Learning Not Only Techniques, But Dreams！！！
Rookie Tutorial - Learning Not Only Techniques, But Dreams！！！

Dynamic icon ¶

fa-spin class can make the icon rotate fa-pulse class allows you torotate the icon in an 8-step cycle.

10.1.5. Example ¶

<iclass="fa fa-spinner fa-spin"></i><iclass="fa fa-circle-o-notch
fa-spin"></i><iclass="fa fa-refresh fa-spin"></i><iclass="fa fa-cog
fa-spin"></i><iclass="fa fa-spinner fa-pulse"></i>

Note: IE8 and IE9 do not support CSS3 animation.

Rotate and flip icons ¶

fa-rotate-\* and fa-flip-\* class is used to rotate and flip icons.

10.1.6. Example ¶

<iclass="fa fa-shield"></i><iclass="fa fa-shield
fa-rotate-90"></i><iclass="fa fa-shield fa-rotate-180"></i><iclass="fa
fa-shield fa-rotate-270"></i><iclass="fa fa-shield
fa-flip-horizontal"></i><iclass="fa fa-shield fa-flip-vertical"></i>

Stacked icons ¶

To stack multiple icons, use the fa-stack class fa-stack-1x class for normal-sized icons fa-stack-2x for larger icons.

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 size.

10.1.7. Example ¶

<spanclass="fa-stack fa-lg"><iclass="fa fa-circle-thin
fa-stack-2x"></i><iclass="fa fa-twitter
fa-stack-1x"></i></span>fa-twitter on
fa-circle-thin<br><spanclass="fa-stack fa-lg"><iclass="fa fa-circle
fa-stack-2x"></i><iclass="fa fa-twitter fa-stack-1x
fa-inverse"></i></span>fa-twitter (inverse) on
fa-circle<br><spanclass="fa-stack fa-lg"><iclass="fa fa-camera
fa-stack-1x"></i><iclass="fa fa-ban fa-stack-2x
text-danger"style="color:red;"></i></span>fa-ban on fa-camera

Results:

fa-twitter on fa-circle-thin
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera

Fixed width icon ¶

fa-fw class is used to set a fixed-width icon. This class is useful whendifferent icon widths deviate from alignment. Especially suitable for Bootstrap navigation lists and list groups.

10.1.8. Example ¶

<divclass="list-group"><ahref="#"class="list-group-item"><iclass="fa
fa-home fa-fw"></i>Home</a><ahref="#"class="list-group-item"><iclass="fa
fa-book
fa-fw"></i>Library</a><ahref="#"class="list-group-item"><iclass="fa
fa-pencil
fa-fw"></i>Applications</a><ahref="#"class="list-group-item"><iclass="fa
fa-cog fa-fw"></i>Settings</a></div>