阿里巴巴矢量库(Iconfont)引入方法

阿里巴巴矢量库网址

阿里巴巴矢量库

引入步骤

1.注册账号
2.搜索图标，如（我的），找到自己需要的图标，鼠标放在该图标上，会显示三个选项，点击“购物车图标”，添加入库。如下图：

点击购物车图标.png

3. 选择完需要的图标后，点击右上角的购物车图标，将所选的图标添加到自己的项目中，如下图：
   点击右上角购物车图标.png

4. 添加项目时，可以新建项目，或选择已有项目，如下图：
   添加到项目.png

5.进入自己的项目，查看项目中的图标，如下图：

项目内容.png

6.鼠标放到对应的图标上，可以下载图标，修改图标等，

可以修改图标.png

修改图标.png

7.图标配置完后，点击“下载到本地”，将 iconfont.css 和 iconfont.ttf 引入项目中，修改其中的iconfont.css,将下列代码

@font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1524450080463');
}

中的代码修改为项目中 iconfont.ttf 所在路径：

@font-face {
font-family: "iconfont";
src: url('../fonts/iconfont.ttf') format('truetype');
}

8.使用时，引入 iconfont.css ,具体使用代码如下( class = " iconfont xxx")：

<a class="mui-icon iconfont icon-shaixuan2 mui-pull-right"></a>