前端如何使用阿里巴巴矢量图库的图标

实现网页中的小图标

首先搜索想要的图标

阿里巴巴矢量图库http://www.iconfont.cn ，可以微博登录

添加购物车

添加至项目

下载至本地

unicode引用

你需要把刚刚下载的压缩包打开，选择以下五个子目录copy到项目路径下，新建一个文件夹

修改目录，每个人放的位置不同，确保路径对就可。

接下来定义使用iconfont的样式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33;</i>

比如：
一开始无图标

在标签里添加相应的代码：

这里发现图标并没有显示出来，路径出现问题，我改成了绝对路径之后成功了！