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

iconfont 彩色图标的使用相关推荐

如何UNI-APP中使用iconfont彩色图标
问题:UNI-APP可以支持用户自定义引入iconfont标签库,但是加载引入页面的标签均为黑白颜色,下载的彩色图标默认变为黑白颜色解决方案: 1.首先,从iconfont官网(iconfont-阿 ...
iconfont彩色图标
进入阿里巴巴矢量图标库iconfont-阿里巴巴矢量图标库,添加图标到项目,然后下载至本地解压后的本地文件如下,核心的是 iconfont.eot 文件 2.打开电脑命令行,执行以下命令,全局安装 ...
uniapp 开发小程序使用iconfont彩色图标
1.在阿里图标官网添加需要的图标到你的项目中,然后下载文件到本地:https://www.iconfont.cn/ 2.解压下载后字体文件,如下: 3.在第二步解压的目录中,打开cmd: 输入命令行: ...
uniapp小程序使用iconfont彩色图标
1.进入阿里巴巴矢量图标库https://www.iconfont.cn/,添加图标到项目,然后下载至本地解压后的本地文件如下 2.下载iconfont-tools npm install -g i ...
微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)
把 iconfont 图标批量转换成多个平台小程序的组件.不依赖字体,支持多色彩. 0 支持平台微信小程序支付宝小程序百度小程序头条小程序(字节跳动) 快手小程序 QQ小程序 1 安装插件 n ...
微信小程序引入iconfont彩色图标
小程序引用iconfont前两种不支持彩色,必须使用symbol,使用方法如下: 引用方法名支持多色兼容性 unicode × 好 font-class × 良好 symbol √ 差 1.小程序 ...
在VUE项目中使用iconfont彩色图标
1.进入main.js文件,引入iconfont.js /* 彩色iconfont */ import '@/xxx/iconfont.js' 2.进入对应的模块,添加对应的css类 .font-ic ...
开发小程序如何使用iconfont彩色图标
1.svg图标上传阿里巴巴图标库并下载:iconfont-阿里巴巴矢量图标库 2.解压文件到项目中: 3.安装 iconfont-tools npm install -g iconfont-tools ...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
怎么在小程序中使用彩色图标iconfont
怎么在小程序中使用彩色图标iconfont 国际惯例,先上图: 概要一般我们在开发的时候,都是采用 iconfont 来管理项目里的图标,方便快捷.但是当我需要将项目迁移的小程序的时候,就遇到了很多 ...

iconfont 彩色图标的使用