在微信小程序中如何引入iconfont

目录

• 前言
• [iconfont 介绍](#iconfont 介绍)
• [iconfont 组建图标库并下载](#iconfont 组建图标库并下载)
• • [1. 通过 iconfont 可组建自己的图标库](#1. 通过 iconfont 可组建自己的图标库)
  • [2. 项目设置：生成base64格式的字体](#2. 项目设置：生成base64格式的字体)
  • [3. 下载至本地](#3. 下载至本地)
  • [4. 解压备用](#4. 解压备用)
• [将 iconfont 添加到小程序中](#将 iconfont 添加到小程序中)
• • [1. 将css该名称wxss](#1. 将css该名称wxss)
  • [2. 将文件复制到font目录](#2. 将文件复制到font目录)
  • [3. 在app.wxss文件中引入iconfont文件](#3. 在app.wxss文件中引入iconfont文件)
• 在小程序中使用字体

前言

略

iconfont 介绍

iconfont 指 https://www.iconfont.cn/。

通过 iconfont 可组建自己的图标库。

iconfont 组建图标库并下载

1. 通过 iconfont 可组建自己的图标库

• 注册帐号
• 创建项目
• 添加图标

2. 项目设置：生成base64格式的字体

• Font Family：默认为iconfont。当项目中已有iconfont名称的字体时，需要使用不同的名字。

3. 下载至本地

略

4. 解压备用

将 iconfont 添加到小程序中

1. 将css该名称wxss

将iconfont.css重命名为iconfont20231007.wxss

2. 将文件复制到font目录

将iconfont20231007.wxss文件复制到小程序的font目录（没有该目录时，可手动创建。其它目录也可以，比较灵活）。

3. 在app.wxss文件中引入iconfont文件

@import 'font/iconfont20231007.wxss';

在小程序中使用字体

<view>首页
<text class="iconfont20231007 icon-zhankai"></text>
</view>