为什么要使用阿里巴巴矢量图标库 Iconfont?

  • Iconfont 提供了近百万的图标,并且有多种使用方式。
  • 使用字体图标,相对图片占用空间小,更清晰,大小颜色更易控制。

如何使用?

1. 登录 Iconfont 官网

2. 搜索图标并加入购物车。

3. 点击右上角购物车图标,点击”添加至项目”,没有项目则会提示创建项目。

4. 进入图标管理-我的项目。

5. 本地引入。

(1)新建css。

.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

(2)引入自定义CSS,引入js链接。

==注意:阿里矢量图库项目中添加图标后需要更新js,所以最好不要使用本地js,减少维护。==

<!--引入阿里巴巴图标库--> <link type="text/css" rel="stylesheet" href="static/lib/iconfont/font.css">
<script type="text/javascript" src="https://at.alicdn.com/t/font_1172369_dp9rtsw3a6j.js"></script>

(3)使用图标。

<div>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-ai-eye"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-yanjing-tianchong"></use>
    </svg>
</div>

(4)效果。