使用 iconfont 图标

185 阅读1分钟

本文主要内容是,介绍在微信小程序和 html 页面中使用 iconfont - 阿里巴巴矢量图标库。

打开官网地址

https://www.iconfont.cn/

在导航栏上,选择资源管理-我的项目中,新建项目

1.png

在搜索栏,选择自己需要的图标,加入购物车,添加至项目

2.png

在我的项目中,生成 css 代码

3.png

点击上面 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>