首先因为 elementUI 提供的 icon 太少了, 所有自己找找有没有矢量图可以补充的, 尝试多种方法, 觉得下面方法简单易懂, 分享给大家
效果图:
推荐使用阿里爸爸矢量图标管理, http://www.iconfont.cn/collections
使用方法 登录账号, 找到需要的图标加入购物车
然后添加到项目
再然后下载代码到本地
下载代码文件然后解压出现这列表
打开 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 图标的方法, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/140108.htm