在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实现UTF8编码转换成gb2312编码
Dec 22 Javascript
Javascript 生成指定范围数值随机数
Jan 09 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
JavaScript函数重载操作实例浅析
May 02 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笔记之:日期函数的使用介绍
2013/04/24 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP二维数组去重算法
2016/12/17 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
python PIL模块与随机生成中文验证码
2016/02/27 Python
Python Socket传输文件示例
2017/01/16 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
公司聘任书模板
2014/03/29 职场文书
评先进个人材料
2014/12/29 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
2015团员个人年度总结
2015/11/24 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
SQL SERVER存储过程用法详解
2022/02/24 SQL Server