vue-cli3 引入 font-awesome的操作


Posted in Javascript onAugust 11, 2020

在 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的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
js判断是否是手机页面
Mar 17 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
js实现列表按字母排序
Aug 11 #Javascript
Vue使用轮询定时发送请求代码
Aug 10 #Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 #Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 #Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 #Javascript
React实现阿里云OSS上传文件的示例
Aug 10 #Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 #Javascript
You might like
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
简单了解JavaScript作用域
2020/07/31 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
财务助理岗位职责
2013/11/10 职场文书
国贸专业个人求职信分享
2013/12/04 职场文书
索桥的故事教学反思
2014/02/06 职场文书
婚前财产公证书
2014/04/10 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
奥运会口号
2014/06/13 职场文书
作风整顿剖析材料
2014/09/30 职场文书
2014年教研工作总结
2014/12/06 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
世界文化遗产导游词
2019/08/07 职场文书