安装
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>
其他图标
请访问 Font Awesome 官网以查询可以使用的 name
值,如 beer
、file
、camera
等。
在vuejs 中使用Font Awesome字体图标
原文地址:https://www.cnblogs.com/yinian/p/8780103.html