1、打开下载地址
iconfont-阿里巴巴矢量图标库
2、图标搜索并添加至项目
我搜的是购物车，这边你可以一次性把你需要的图标一起加入购物车之后再做下一步操作，我这边就用一个来做演示
然后添加至购物车，右上角购物车会显示你已添加的素材数量
然后点开右上角购物车，添加至项目，可以新建一个项目
然后确定后会自动跳转到项目里，然后切换到Font Class下，下载至本地解压
3、解压后引用到本地项目
然后找到这个目录里，把里面的文件全部复制到我们需要的项目里，我这边放在项目的img文件夹下的图标文件夹里，这是我自己建的，你这边根据你的需要放就行了
4、具体用法
首先引入iconfont.css；
<!-- 引用下载的图标css --> <link rel="stylesheet" href="./img/图标/iconfont.css">
然后打开demo_index.html，运行
用法一：类名形式 iconfont icon-xxx，这个类名从demo_index.html中的Font class里去找
<!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> <!-- 引用下载的图标css --> <link rel="stylesheet" href="./img/图标/iconfont.css"> <!-- 第一种用法样式 --> <style> span{ font-size: 50px !important; color: red; } </style> </head> <body> <!-- 第一种：“类名形式” iconfont icon-xxx--> <span class="iconfont icon-gouwucheman"></span> </body> </html>
效果展示
用法二：转义字符形式（&实体的名字；），从demo_index.html中的Unicode里去找
<!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> <!-- 引用下载的图标css --> <link rel="stylesheet" href="./img/图标/iconfont.css"> <style> /* 第一种用法样式 */ span{ font-size: 50px !important; color: red; } /* 第二种用法样式 */ .p1{ font-size: 100px !important; color: green; } </style> </head> <body> <!-- 第一种：“类名形式” iconfont icon-xxx--> <span class="iconfont icon-gouwucheman"></span> <!-- 第二种：转义字符形式（&实体的名字；） --> <p class="iconfont p1"></p> </body> </html>
效果展示
