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 Event事件学习第一章 Event介绍
Feb 07 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
jquery tab插件制作实现代码
Jun 22 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
js 实现Material UI点击涟漪效果示例
Sep 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
ThinkPHP令牌验证实例
2014/06/18 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
Python 的类、继承和多态详解
2017/07/16 Python
Python入门学习指南分享
2018/04/11 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
Django 请求Request的具体使用方法
2019/11/11 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
高中化学教学反思
2014/01/13 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏