一、矢量图

计算机用点坐标加上线和面来描述一幅图，这样的图称为矢量图。

特点： 矢量图是由坐标描述出来的，图形是由浏览器动态绘制的，所以当图像在放大或缩小的时候，不会失真，非常清晰不会模糊。

二、下载

​​阿里图库​​ 选择图标库，加入到自己的项目中。

#yyds干货盘点#矢量图标iconfont_矢量图

#yyds干货盘点#矢量图标iconfont_矢量图_02

#yyds干货盘点#矢量图标iconfont_css_03

然后在 资源管理 -> 我的项目 中，下载图标库

#yyds干货盘点#矢量图标iconfont_css_04

#yyds干货盘点#矢量图标iconfont_矢量图_05

批量加入图标进购物车的方法:

​#yyds干货盘点#矢量图标iconfont_矢量图_06

F12（或者fn+f12），在控制台输入：

let arr = document.querySelectorAll('.icon-cover>span[title="添加入库"]');
for (let i = 0; i < arr.length; i++) {
  arr[i].click();
}

#yyds干货盘点#矢量图标iconfont_矢量图_07

点购物车标志查看，会发现所有的都加进来了。

#yyds干货盘点#矢量图标iconfont_小程序_08

添加至项目。

三、使用

html中使用

  1. 在矢量图库项目中，选择 项目设置 -> 字体格式 勾选 base64 并保存
  2. 下载项目，并解压项目
  3. 在页面中使用 link 标签引入 iconfont.css 文件
  4. 创建一个 span 标签，在 span 标签上添加 class="iconfont"，查询图标的 class 名称，并添加图标的 class 到 span 标签上即可

图标的本质实际上是字符，所以要放大缩小图标，就可以调整 font-size 属性 同理，修改颜色只需要修改字符颜色即可，用 color 属性进行修改。

<!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>
    <link rel="stylesheet" href="./css/iconfont.css">
</head>

<body>
    <span class="iconfont icon-jian" style="font-size: 50px"></span>
    <span class="iconfont">
        我&#xe6a0;喜欢&#xe6a0;王&#xe6a0;一博
    </span>
</body>

</html>

小程序中使用

  1. 下载图标
  2. 将 base64 格式的 iconfont.css 文件拷贝到小程序的 font 或 css 文件夹
  3. 将 iconfont.css 名称 改为 iconfont.wxss
  4. 在 app.wxss 中第一行 引入 iconfont.wxss
@import "./font/iconfont.wxss";
  • 引入完成后，可以在小程序页面中，使用 text 组件，并在组件上添加 iconfont 的样式属性，例如：
<text class="iconfont icon-icon-test2"></text>