iconfont 彩色图标的使用

之前写过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>