如何在Vue中使用Font Awesome？

Font Awesome 字型為您提供可縮放向量圖示,它可以被定製大小、顏色、陰影以及任何可以用CSS的樣式。

官網地址：http://www.fontawesome.com.cn/

目錄

1、安裝依賴

2、引入依賴

3、使用方式

3.1、基本圖示

3.2、大圖示

3.3、固定寬度

3.4、用於列表

3.5、邊框與對齊

3.6、動畫

3.7、旋轉與翻轉

3.8、組合使用

---

1、安裝依賴

npm install font-awesome --save

2、引入依賴

可以選擇全域性引入或區域性引入

import 'font-awesome/css/font-awesome.min.css';

3、使用方式

3.1、基本圖示

您可以將Font Awesome圖示使用在幾乎任何地方，只需要使用CSS字首 fa ，再加上圖示名稱。 Font Awesome是為使用內聯元素而設計的。我們通常更喜歡使用 <i> ，因為它更簡潔。 但實際上使用 <span> 才能更加語義化。

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

3.2、大圖示

使用 fa-lg (33%遞增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 類 來放大圖示。

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

3.3、固定寬度

使用 fa-fw 可以將圖示設定為一個固定寬度。主要用於不同寬度圖示無法對齊的情況。 尤其在列表或導航時起到重要作用。

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

3.4、用於列表

使用 fa-ul 和 fa-li 便可以簡單的將無序列表的預設符號替換掉。

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

3.5、邊框與對齊

使用 fa-border 以及 pull-right 或 pull-left 可以輕易構造出引用的特殊效果。

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

3.6、動畫

使用 fa-spin 類來使任意圖示旋轉，現在您還可以使用 fa-pulse 來使其進行8方位旋轉。尤其適合 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>              

3.7、旋轉與翻轉

使用 fa-rotate-* 和 fa-flip-* 類可以對圖示進行任意旋轉和翻轉。 

<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

3.8、組合使用

 如果想要將多個圖示組合起來，使用 fa-stack 類作為父容器， fa-stack-1x 作為正常比例的圖示， fa-stack-2x 作為大一些的圖示。還可以使用 fa-inverse 類來切換圖示顏色。您可以在父容器中 通過新增 大圖示類來控制整體大小。

<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