vue-cli3 引入 font-awesome的操作
更新时间：2020年08月11日 08:35:24 作者：woyaoshengzhang
这篇文章主要介绍了vue-cli3 引入 font-awesome的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在 package.json 添加
"font-awesome": "^4.7.0"
执行 npm install
在 main.js 引入
// font
import "font-awesome/css/font-awesome.min.css"
补充知识：在Vue2.0中引入font-awesome，并在Element-ui中正确显示font-awesome的icon
如下所示：
npm install font-awesome --save
在main.js中引入
import 'font-awesome/css/font-awesome.css'
在App.vue的
[class^="el-icon-fa"], [class*=" el-icon-fa"] {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome!important;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@import '../node_modules/font-awesome/css/font-awesome.css';
$fa-css-prefix: el-icon-fa;
正常使用
<i class="fa fa-user"></i>
<i class="fa fa-tree"></i>
<el-button icon="el-icon-fa fa-user" size="mini">用户</el-button>
<el-button icon="el-icon-fa fa-tree" size="mini">用户</el-button>
以上这篇vue-cli3 引入 font-awesome的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了vue开发中后台系统复杂表单的优化技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
防抖函数的作用是高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间内再次触发,则重新计算时间,本文将给大家详细的介绍一下Vue3使用customRef封装防抖函数的方法,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了详解Vue.js入门环境搭建，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要为大家详细介绍了Vue参数的增删改实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了如何利用vue-router实现二级菜单内容转换,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
今天小编就为大家分享一篇在vue中给列表中的奇数行添加class的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最常见的多环境配置，就是开发环境配置,和生产环境配置，本文主要介绍了vue项目多环境配置的实现，感兴趣的可以了解一下2021-07-07
这篇文章给大家分享了vue.js删除列表中的一行的实例操作以及代码分享，有兴趣的朋友参考下。2018-06-06
Element-Plus之el-col与el-row快速布局
el-col是el-row的子元素,下面这篇文章主要给大家介绍了关于Element-Plus之el-col与el-row快速布局的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue如何动态修改meta的title，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
最新评论