在Vue中使用icon 字体图标的方法


Posted in Javascript onJune 14, 2019

1.使用线上的阿里iconfont图标库

1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车

2.点击购物车,添加至项目

3 生成链接

在Vue中使用icon 字体图标的方法

4在我们的vue项目中,找到index.html文件,引入css样式,记住这里要放上你的链接地址

5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个。

2但是考虑网络及用户体验 阿里iconfont下载本地使用

1 阿里iconfont图标直接下载到本地

2 在assets文件下创建iconfont文件夹

把这些文件放入文件夹

在Vue中使用icon 字体图标的方法

3 iconfont.css文件中改路径

在Vue中使用icon 字体图标的方法

4 在main.js中引入iconfont.css文件

在Vue中使用icon 字体图标的方法

5直接使用

3使用vue-awesome

1.首先安装vue-awesome依赖包

npm install vue-awesome

2.在main.js文件下

在github上可以明确看到如果考虑项目大小,只导入用于减少包大小的图标

import 'vue-awesome/icons/flag'

或者不考虑大小

在Vue中使用icon 字体图标的方法

直接使用

<icon name="beer"></icon>

总结

以上所述是小编给大家介绍的在Vue中使用icon 字体图标的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
绑定回车enter事件代码
May 18 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
编写v-for循环的技巧汇总
Dec 01 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 #Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 #Javascript
vue路由插件之vue-route
Jun 13 #Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 #Javascript
详解vuex之store源码简单解析
Jun 13 #Javascript
vue store之状态管理模式的详细介绍
Jun 13 #Javascript
微信小程序页面间跳转传参方式总结
Jun 13 #Javascript
You might like
PHP中实现图片的锐化
2006/10/09 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
Python getopt模块处理命令行选项实例
2014/05/13 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
实例说明Python中比较运算符的使用
2015/05/13 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
python实现二维数组的对角线遍历
2019/03/02 Python
python实现Virginia无密钥解密
2019/03/20 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
办理信用卡工作证明
2014/01/11 职场文书
车辆安全检查制度
2014/01/12 职场文书
小学生打架检讨书
2014/01/26 职场文书
九年级数学教学反思
2014/02/02 职场文书
座谈会主持词
2014/03/20 职场文书
外联部演讲稿
2014/05/24 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
医德医风自我评价
2014/09/19 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书