创建出口文件 index.js 这里面将引入所有图标 js 文件
// src/icons/index.js
import './chevron-right.js';
// ...... 其他需要的图标文件以右键头图标为例：(chevron-right.js)
import Icon from '../components/Icon.vue';
Icon.register({
'chevron-right': {
'width': 1280,
'height': 1792,
'paths': [{
'd': 'M1107 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'
}] }
});项目入口 main.js 引用字体库
项目主入口文件 main.js 中引入
vue-awesome 库和
icons/index.js 文件引入图标组件
import Icon from './components/Icon';引入图标内容文件
import './icons/index.js';然后将 Icon 注册成 vue 组件
Vue.component('icon', Icon);注册完成之后，我们就可以在代码中直接使用
<icon></icon> 标签了结束
使用步骤还是很简单的，经过上面的步骤之后我们就可以正常使用图标库了
总结下来步骤其实就下面几步
import Icon.vue 组件
new you-icon.js，里面通过 Icon.register 注册图标
【可选】 新建图标文件出口文件，这个在使用的图标很多的时候比 较方便
<icon name=”you icon name”></icon> 引用图标
给图标设置样式（大小可以通过 transform: scale() 来设置）
PS: 直接设置字体，改变不了大小；
总结
以上所述是小编给大家介绍的vue.js系列中的vue-fontawesome使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
