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 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
使用javascript获取页面名称
Dec 23 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
JavaScript相等运算符的九条规则示例详解
Oct 20 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通用防注入程序 推荐
2011/02/26 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
JavaScript中的Window窗口对象
2008/01/16 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
jquery easyui使用心得
2014/07/07 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JS面向对象编程详解
2016/03/06 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
Python最长公共子串算法实例
2015/03/07 Python
Python pass详细介绍及实例代码
2016/11/24 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
办公室主任竞聘演讲稿
2014/05/15 职场文书
校园文明标语
2014/06/13 职场文书
国庆节活动总结
2014/08/26 职场文书
调任通知
2015/04/21 职场文书
教师旷工检讨书
2015/08/15 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书