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 相关文章推荐
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
js实现3D旋转效果
Aug 18 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 disk_free_space 返回目录可用空间
2010/05/10 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
php绘制一条直线的方法
2015/01/24 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
一张图带我们入门Python基础教程
2017/02/05 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
python pandas模块基础学习详解
2019/07/03 Python
使用pip安装python库的多种方式
2019/07/31 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
初中科学教学反思
2014/01/21 职场文书
2015年财政局工作总结
2015/05/21 职场文书
电工实训心得体会
2016/01/14 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
python实现简单倒计时功能
2021/04/21 Python
不要在HTML中滥用div
2021/05/08 HTML / CSS
MySQL如何解决幻读问题
2021/08/07 MySQL