之前写过iconfont单色图标的应用，今天来介绍一下彩色图标的使用
文章目录
- 一、去iconfont矢量图库下载素材
- 1、挑选自己喜欢的素材
- 2、然后下载到本地，是个压缩包
- 3、把压缩包解压到你的项目底下
- 4、打开解压后的文件
- 5、打开demo_index.html
- 二、在页面中引入
- 1、创建页面项目文件夹
- 2、编写基本页面结构
- 3、把demo_index.html里的内容复制到网页上
- 4、script引入
- 5、编写css文件
- 6、把demo_index.html中的svg复制到页面的body中
- 三、效果展示
- 总结
一、去iconfont矢量图库下载素材
1、挑选自己喜欢的素材
把自己想要的素材点击 添加入库
在右上角的购物车中点击打开
2、然后下载到本地，是个压缩包
3、把压缩包解压到你的项目底下
4、打开解压后的文件
5、打开demo_index.html
Unicode 和 Font class都是黑白图标，所以我们点击Symbol，这个网页上都有教程教我们怎么使用，我来演示一下
二、在页面中引入
1、创建页面项目文件夹
我分别建了css的文件夹，页面的文件夹page
2、编写基本页面结构
3、把demo_index.html里的内容复制到网页上
这里要做一些修改，因为存放的文件夹不同，所以引用路径也不同。
4、script引入
路径一定要正确，不正确就没用！！
引入的文件是这个
5、编写css文件
也是把demo_index.html中的style文档复制到你的css中，可以自己改变一下图标大小
要记得在index.html中引入这个css文件哦，别忘了
6、把demo_index.html中的svg复制到页面的body中
注意这里面的<use xlink:href="#icon-miantiao"></use> #icon-miantiao这个东西是图标的名字，在demo_index.html中查找
三、效果展示
总结
HTML代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../font_2664596_03gxajr1ogq6/iconfont.js"></script><link rel="stylesheet" href="../css/index.css">
</head><body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-guozhi"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiu"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-miantiao"></use></svg>
</body></html>
CSS代码：
.icon { width: 5em; height: 5em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
