Font Awesome Icon

Font Awesome It is an excellent icon font library and CSS frame .

Font Awesome Fonts provide you with scalable vector icons , It can be customized in size 、 Color 、 Shadows and anything you can use CSS Style .

To use Font Awesome Icon , Please in HTML Page Add the following line to the section :

1、 Domestic recommendation CDN:

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

2、 Overseas recommendation CDN

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

3、 Download directly to local

Download

be careful : It is not recommended to download to install , Directly in html Document header reference CDN Just file .

be careful : This tutorial uses 4.7.0 edition .

You can use the prefix fa And the name of the icon Font Awesome Icon .

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 >

result :


Give it a try »

click " Give it a try " Button to view an online instance

Font Awesome Designed for use with inline elements . <i> and <span> Element is widely used for icons .

Also note , If you change the font size or color of the icon container , The icon will change .


Big icon

fa-lg ( increase 33%),fa-2x,fa-3x, fa-4x, Or fa-5x 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 >

result :


Give it a try »

Tips : If your icon is cut off at the top and bottom , Please increase the row height .


List icon

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

example

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

result :

  • List icons
  • List icons
  • List icons

Give it a try »

Borders and pulled icons

fa-border,fa-pull-right Or fa-pull-left Class is used to pull references or article icons .

example

< i class = " fa fa-quote-left fa-3x fa-pull-left fa-border " > </ i > Programming tutorial -- Learn more than technology , It's a dream !!! < br > Programming tutorial -- Learn more than technology , It's a dream !!! < br > Programming tutorial -- Learn more than technology , It's a dream !!! < br > Programming tutorial -- Learn more than technology , It's a dream !!!

result :

Programming tutorial -- Learn more than technology , It's a dream !!!
Programming tutorial -- Learn more than technology , It's a dream !!!
Programming tutorial -- Learn more than technology , It's a dream !!!
Programming tutorial -- Learn more than technology , It's a dream !!!

Give it a try »

Dynamic icons

fa-spin Class can rotate icons , fa-pulse Class can make icons appear as 8 Step is to rotate periodically .

example

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

result :


Give it a try »

be careful : IE8 and IE9 I won't support it CSS3 Animation .


Rotating and flipping icons

fa-rotate-* and fa-flip-* Class is used to rotate and flip icons .

example

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

result :


Give it a try »

Stacked icons

To stack multiple icons , Please use... On the parent fa-stack class ,fa-stack-1x Class for regular size 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 .

example

< 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

result :

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

Give it a try »

Fixed width icon

fa-fw Class is used to set a fixed width icon . When different icon widths deviate from alignment , This class is very useful . Especially suitable for Bootstrap Navigation list and list group .

example

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

Give it a try »