如何使用iconFont矢量图标库

一.使用在线链接

1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”

image.png

2.选择完所有要用的图标后,点击"购物车"->"添加至项目"，给它命名。然后在"图标管理"->"图标应用项目"中找到这个项目->"获取在线链接"，把里面的代码复制到CSS中。

image.png image.png

3.把复制的在线链接和以下代码写入css文件，然后你可以通过控制iconfont类的属性改变图标的样式，比如：

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

4.在HTML中需要使用到图标时，使用iconfont类名。

注意：类名是在上面代码中font-family里面定义的，需要保持一致

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

里面写上你想用的图标下面的Unicode：

image.png

二.下载字体文件到本地使用

将在线链接中使用到的字体文件（.eot、.woff、.ttf、.svg）下载到本地，在css代码中引入本地文件就好了