vue 字体图标使用

http://fontawesome.dashgame.com/

vue中如何使用

1:安装命令

npm install vue-awesome

2:引入文件

/* 在下面两种方式中任选一种 */

// 仅引入用到的图标以减小打包体积
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
  }
}

使用方法:
注意点:复制粘贴name名时切记只要最后一个单词或只要字体图标显示的单词其他的删除了

<!-- 基础用法 -->
<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>