在vuejs 中使用Font Awesome字體圖標

安裝

npm install vue-awesome

引入

import Vue from 'vue'

/* 在下面兩種方式中任選一種 */

// 僅引入用到的圖標以減小打包體積
import 'vue-awesome/icons/flag'

// 或者在不關心打包體積時一次引入全部圖標
import 'vue-awesome/icons'

/* 任選一種注冊組件的方式 */

import Icon from 'vue-awesome/components/Icon'

// 全局注冊（在 `main .js` 文件中）
Vue.component('icon', Icon)

// 或局部注冊（在組件文件中）
export default {
  components: {
    Icon
  }
}

使用方法

<!-- 基礎用法 -->
<icon name="beer"></icon>

<!-- 添加選項 -->
<icon name="sync" scale="2" spin></icon>
<icon name="comment" flip="horizontal"></icon>
<icon name="code-branch" label="Forked Repository"></icon>

<!-- 堆疊圖標 -->
<icon label="No Photos">
  <icon name="camera"></icon>
  <icon name="ban" scale="2" class="alert"></icon>
</icon>

旋轉動畫

<icon name="spinner" spin></icon>
<icon name="spinner" pulse></icon>

動態尺寸

可以添加以下 CSS 代碼來讓圖標根據當前的 font-size 動態調整尺寸：

.fa-icon {
  width: auto;
  height: 1em; /* 或任意其它字體大小相對值 */
  /* 要在 Safari 中正常工作，需要再引入如下兩行代碼 */
  max-width: 100%;
  max-height: 100%;
}

其他圖標

請訪問 Font Awesome 官網以查詢可以使用的 name 值，如 beer、file、camera 等。