iconfont 单色图标的使用

---

前言

今天给大家介绍一下阿里矢量图库 单色图标 的使用。

---

一、去阿里矢量图库下载你想要的图标

第一步：点击添加入库

第二步：点一下购物车，会进入下面一个步骤

第三步：点击添加至项目，新建一个项目，并存入，就变成下面这个界面：

第四步：点击下载至本地

第五步：打开下载好的压缩包，并把它拖入fonts文件夹，改个好看一点的名字（ 我改成 font_font1 ）:

第六步：打开这个font_font1文件，点击里面的demo_index.html，打开：


第七步：新建一个.css文件

第八步：拷贝demo_index.html中的第一步（ 这一步要仔细一点，要改路径 ）


因为font文件被我单独放在了一个文件夹里，所以要修改一下地址。

地址改好了：

第九步：把demo_index.html第二步拷贝到 font_font1.css 文档里：

第十步：新建一个html页面，导入 font_font1.css 文件：

第十一步：开始使用iconfont：这里的类一定要引用font_font1.css 中的 iconfont类

第十二步：在

这里

复制 demo_index.html 中的 Unicode


保存代码，并运行：

完成！！！


之后我会再写一片彩色svg图标的使用方法。

---