下載

使用示例

• 引入CSS文件

<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">

基本圖標(biāo)

您可以將Font Awesome圖標(biāo)使用在幾乎任何地方，只需要使用CSS前綴 fa ，再加上圖標(biāo)名稱(chēng)骨稿。 Font Awesome是為使用內(nèi)聯(lián)元素而設(shè)計(jì)的。我們通常更喜歡使用 i標(biāo)簽 抖单，因?yàn)樗?jiǎn)潔。 但實(shí)際上使用 <span> 才能更加語(yǔ)義化让歼。

<i class="fa fa-camera-retro"></i> fa-camera-retro

基本

注：如果您修改了圖標(biāo)容器的字體大小，圖標(biāo)大小會(huì)隨之改變丽啡。同樣的變化也會(huì)發(fā)生在顏色谋右、陰影等其它任何CSS支持的效果上。

大圖標(biāo)

使用 fa-lg (33%遞增)补箍、fa-2x改执、 fa-3x、fa-4x坑雅，或者 fa-5x 類(lèi) 來(lái)放大圖標(biāo)辈挂。

大圖標(biāo)

注：如果圖標(biāo)的底部和頂部被截?cái)嗔耍枰黾有懈邅?lái)解決此問(wèn)題裹粤。

固定寬度

使用 fa-fw 可以將圖標(biāo)設(shè)置為一個(gè)固定寬度终蒂。主要用于不同寬度圖標(biāo)無(wú)法對(duì)齊的情況。 尤其在列表或?qū)Ш綍r(shí)起到重要作用蛹尝。

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

固定寬度

用于列表

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

列表

邊框和對(duì)齊

使用 fa-border 以及 pull-right 或 pull-left 可以輕易構(gòu)造出引用的特殊效果后豫。

<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

邊框和對(duì)齊

動(dòng)畫(huà)

使用 fa-spin 類(lèi)來(lái)使任意圖標(biāo)旋轉(zhuǎn)悉尾，現(xiàn)在您還可以使用 fa-pulse 來(lái)使其進(jìn)行8方位旋轉(zhuǎn)突那。尤其適合 fa-spinner、fa-refresh 和 fa-cog 构眯。

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

注： CSS3動(dòng)畫(huà)不支持IE8-IE9愕难。

動(dòng)畫(huà)（截圖）

旋轉(zhuǎn)與翻轉(zhuǎn)

使用 fa-rotate-* 和 fa-flip-* 類(lèi)可以對(duì)圖標(biāo)進(jìn)行任意旋轉(zhuǎn)和翻轉(zhuǎn)。

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

旋轉(zhuǎn)與翻轉(zhuǎn)

組合使用

如果想要將多個(gè)圖標(biāo)組合起來(lái)，使用 fa-stack類(lèi)作為父容器猫缭， fa-stack-1x作為正常比例的圖標(biāo)葱弟， fa-stack-2x 作為大一些的圖標(biāo)。還可以使用 fa-inverse類(lèi)來(lái)切換圖標(biāo)顏色猜丹。您可以在父容器中 通過(guò)添加 大圖標(biāo) 類(lèi)來(lái)控制整體大小芝加。

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<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"></i>
</span>
fa-ban on fa-camera

組合使用