首先因为 elementUI 提供的 icon 太少了, 所有自己找找有没有矢量图可以补充的, 尝试多种方法, 觉得下面方法简单易懂, 分享给大家
推荐使用阿里爸爸矢量图标管理, http://www.iconfont.cn/collections
image.png
使用方法
登录账号, 找到需要的图标加入购物车
image.png
然后添加到项目
image.png
再然后下载代码到本地
image.png
下载代码文件然后解压出现这列表
image.png
打开 html 文件, 引用方法教程
补充我人的坑, 之前想着在 style 标签里 @import "", 结果一直报错, 试了很多方法还是没效果, 把问题想复杂了
第一步: 在 index.html 引入 fontclass 代码:
<link rel="stylesheet" type="text/CSS" href="./iconfont.css">
第二步: 挑选相应图标并获取类名, 应用于页面:
<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"></use>
</svg>
这是一种全新的使用方式, 应该说这才是未来的主流, 也是平台目前推荐的用法. 相关介绍可以参考这篇文章 这种用法其实是做了一个 svg 的集合, 与另外两种相比具有如下特点:
支持多色图标了, 不再受单色限制.
通过一些技巧, 支持像字体那样, 通过 font-size,color 来调整样式.
兼容性较差, 支持 ie9+, 及现代浏览器.
浏览器渲染 svg 的性能一般, 还不如 png.
效果图:
image.png
来源: http://www.jianshu.com/p/62f700817b6d