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 相关文章推荐
深入理解javascript动态插入技术
Nov 12 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
js断点调试经验分享
Dec 08 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
javascript表单验证大全
2015/08/12 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
js实现图片360度旋转
2017/01/22 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
python模拟Django框架实例
2016/05/17 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
酒店拾金不昧表扬信
2014/01/18 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
交警失职检讨书
2015/01/26 职场文书
法院个人总结
2015/03/03 职场文书
运动员加油词
2015/07/18 职场文书
接收函
2019/04/22 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers