前端项目使用iconfont字体库管理相关图标。
增加新的图标到相关项目
- 步骤一：搜索相关图标；
- 步骤二：加入购物车；
- 步骤三：进入购物车，添加至相关项目；
- 步骤四：进入相关项目，下载至本地；
- 步骤五：覆盖相关项目中的
src/style/fonts/目录文件即可。
项目中引用图标
项目中采用symbol引用方式
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过
font-size,color来调整样式。 - 兼容性较差，支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般，还不如png。
使用步骤如下：
步骤一：拷贝项目下面生成的symbol代码：
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
步骤二：加入通用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>