本文主要内容是,介绍在微信小程序和 html 页面中使用 iconfont - 阿里巴巴矢量图标库。
打开官网地址
https://www.iconfont.cn/
在导航栏上,选择资源管理-我的项目中,新建项目
在搜索栏,选择自己需要的图标,加入购物车,添加至项目
在我的项目中,生成 css 代码
点击上面 css 的 URL 链接,下载,分别保存为 iconfont.css 和 iconfont.wxss 文件
在微信小程序中使用
在页面的 wxss 中引用
@import "../../utils/iconfont.wxss";
在页面的 wxml 文件中使用
<text class="iconfont icon-tubiaoshangshengqushi"></text></text>
在 html 页面中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> iconfont </title>
<link href="./iconfont.css" rel="stylesheet">
</head>
<body>
<p>你可以去定义它的颜色或者大小,如: </p>
<i class="iconfont icon-tubiaoshangshengqushi" style="font-size: 30px; color: #1E9FFF;"></i>
</body>
</html>