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 相关文章推荐
jquery 缓存问题的几个解决方法
Nov 11 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
bootstrap css样式之表单
Jan 19 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
JS鼠标滚动分页效果示例
Jul 05 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
vue组件中实现嵌套子组件案例
Aug 31 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学习 字符串课件
2008/06/15 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
Python Trie树实现字典排序
2014/03/28 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python global全局变量函数详解
2018/09/18 Python
python实现简单的文字识别
2018/11/27 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
python实现电子书翻页小程序
2019/07/23 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
Python日志器使用方法及原理解析
2020/09/27 Python
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
销售自我评价
2013/10/22 职场文书
幼师自荐信
2013/10/26 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
《落花生》教学反思
2014/02/25 职场文书
副董事长岗位职责
2014/04/02 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书