vue使用自定义icon图标的方法


Posted in Javascript onMay 14, 2018

首先因为elementUI提供的icon太少了,所有自己找找有没有矢量图可以补充的,尝试多种方法,觉得下面方法简单易懂,分享给大家

效果图:

vue使用自定义icon图标的方法

推荐使用阿里爸爸矢量图标管理,iconfont

vue使用自定义icon图标的方法

vue使用自定义icon图标的方法

使用方法 登录账号,找到需要的图标加入购物车

然后添加到项目 

vue使用自定义icon图标的方法

再然后下载代码到本地

vue使用自定义icon图标的方法

下载代码文件然后解压出现这列表

vue使用自定义icon图标的方法

打开HTML文件,引用方法教程

补充我人的坑,之前想着在style标签里@import "",结果一直报错,试了很多方法还是没效果,把问题想复杂了

第一步:在index.html引入fontclass代码:

<link rel="stylesheet" type="text/css" href="./iconfont.css" rel="external nofollow" >

第二步:挑选相应图标并获取类名,应用于页面:

<i class="iconfont icon-xxx"></i>

特点:

兼容性良好,支持ie8+,及所有现代浏览器。

相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。

因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。

不过因为本质上还是使用的字体,所以多色图标还是不支持的。

symbol引用 第一步:html引入symbol代码:

<script src="./iconfont.js"></script>

第二步:加入通用css代码(引入一次就行):

<style type="text/css">.icon 
{ 
 width: 1em; 
height: 1em; 
 vertical-align: -0.15em; 
 fill: currentColor; 
overflow: hidden;}</style>

第三步:挑选相应图标并获取类名,应用于页面:

<svg class="icon" aria-hidden="true"> 
<use xlink:href="#icon-xxx" rel="external nofollow" >
</use>
</svg>

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过 font-size , color 来调整样式。
  • 兼容性较差,支持 ie9+,及现代浏览器。
  • 浏览器渲染svg的性能一般,还不如png。

总结

以上所述是小编给大家介绍的vue使用自定义的icon图标的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
sails框架的学习指南
Dec 22 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
AngularJS内置指令
Feb 04 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
angular动态表单制作
Feb 23 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 #Javascript
vue组件中的数据传递方法
May 14 #Javascript
vue如何在自定义组件中使用v-model
May 14 #Javascript
JavaScript常用数学函数用法示例
May 14 #Javascript
JavaScript中常见内置函数用法示例
May 14 #Javascript
纯js封装的ajax功能函数与用法示例
May 14 #Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 #Javascript
You might like
php中数据的批量导入(csv文件)
2006/10/09 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
php使用session二维数组实例
2014/11/06 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
javawscript 三级菜单的实现原理
2009/07/01 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
js实现打字小游戏
2019/12/17 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
python字符串判断密码强弱
2020/03/18 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
成功的酒店创业计划书
2013/12/27 职场文书
大学毕业感言一句话
2014/02/06 职场文书
企业新年寄语
2014/04/04 职场文书
节水口号标语
2014/06/19 职场文书
找工作求职信
2014/07/07 职场文书
营销学习心得体会
2014/09/12 职场文书
交通安全月活动总结
2015/05/08 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
比较node.js和Deno
2021/04/27 Javascript
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技