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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
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
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
利用php生成验证码
2017/02/23 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
javascript 常用关键字列表集合
2007/12/04 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
使用Python的内建模块collections的教程
2015/04/28 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
django 环境变量配置过程详解
2019/08/06 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
CAD制图人员的自荐信
2014/02/07 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
征兵宣传标语
2014/06/20 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
MySQL多表查询机制
2022/03/17 MySQL