当前位置：首页 > news >正文

微信小程序开发从零基础到项目发布的全流程实战教程（五）

news 2025/10/11 23:17:03

小程序开发进阶：样式设计与图标库集成

引言：从小程序页面初始化说起
基础样式设置详解
2.1 背景色与文字颜色配置
2.2 字体大小控制：rpx 单位深入解析
2.3 圆角效果实现 —— border-radius
2.4 外边距控制 —— margin 的四值语法
2.5 内边距控制 —— padding 的作用与应用
布局基础知识补充
3.1 盒模型概述（Box Model）
3.2 margin 与 padding 的区别对比
3.3 常见布局误区及调试技巧
引入第三方图标库的重要性
4.1 为什么不能手动画图标？
4.2 矢量图标的三大优势
4.3 主流图标库选型分析（IconFont vs Font Awesome）
阿里 IconFont 实战接入全流程
5.1 注册与登录阿里 IconFont 平台
5.2 搜索并收藏所需图标
5.3 创建项目并添加图标至项目
5.4 配置项目输出格式：Base64 编码的重要性
5.5 下载或生成在线 CSS 引用链接
5.6 在小程序中正确引入远程字体资源
静态资源管理规范
6.1 小程序目录结构最佳实践
6.2 static 文件夹的作用与组织方式
6.3 CSS 文件分离策略：全局样式 vs 局部样式
样式引入机制详解
8.1 使用 @import 引入外部 CSS
8.2 页面级样式与组件样式优先级
8.3 全局样式文件 app.wxss 的作用域
常见问题排查与优化建议
9.1 图标不显示的可能原因
9.2 Base64 与 CDN 加载性能权衡
9.3 小程序样式兼容性注意事项
扩展知识：现代前端图标解决方案
10.1 SVG Sprite 技术原理
10.2 自定义字体图标打包工具（如 IcoMoon）
10.3 微信原生组件中的图标支持情况
总结与学习路径推荐
附录 A：完整代码示例汇总
附录 B：常用 rpx 尺寸对照表
附录 C：阿里 IconFont 项目配置截图说明（文字版）

1. 引言：从小程序页面初始化说起

在开始本节课程之前，我们首先回顾一下当前所处的小程序开发环境背景。根据原始音频内容描述，讲师正在指导学生清理一个已有的微信小程序页面模板，移除原有的默认元素（如 <button> 组件），从而为后续自定义 UI 设计打下干净的基础。

“来到咱们的这个里边的微信 ss 里边这个 button 我就不要了啊……之前咱们有这些东西都全去掉。”

这里的“微信 ss”应为口误，实际指代的是 微信开发者工具中的 .wxml 和 .wxss 文件。其中：

.wxml 是小程序的结构层语言，类似于 HTML；
.wxss 是样式表语言，是 CSS 的超集，支持大部分标准 CSS 特性，并扩展了尺寸单位 rpx。

通过删除初始组件，讲师强调了一个重要的开发理念：在构建复杂界面前，先清空冗余内容，保持视图简洁可控。

接下来的教学重点转向如何在一个空白 <view> 容器中逐步添加视觉样式，包括背景色、字体大小、圆角、内外边距等基本属性，最终目标是在该容器左侧加入一个小提示图标（tips icon），以增强用户体验。

这一过程不仅展示了样式编写的顺序逻辑，也揭示了现代移动端开发中“渐进式增强”的思想——从无到有，逐层叠加功能与美观。

2. 基础样式设置详解

2.1 背景色与文字颜色配置

设置背景色：`background-color`

在 .wxss 文件中，可以通过 background-color 属性为元素设置背景颜色。例如：

.tip-container {background-color: #ffffcc; /* 浅黄色 */
}

讲师提到“偏黄的这么一个颜色”，这是一种口语化的表达，意指选择一种柔和、不刺眼的黄色调作为提示区域的底色。这种色彩心理学上的考量非常重要：暖色调能引起注意但不至于造成压迫感，非常适合用于信息提示类 UI 元素。

常见的浅黄色系颜色值包括：

颜色名称	HEX 值	RGB 表达式
米白	`#fdf5e6`	rgb(253, 245, 230)
淡黄	`#fffacd`	rgb(255, 250, 205)
象牙白	`#fffff0`	rgb(255, 255, 240)
浅卡其	`#f0e68c`	rgb(240, 230, 140)

推荐使用十六进制（HEX）表示法，因其简洁且广泛支持。

设置文字颜色：`color`

文字颜色由 color 属性控制：

.tip-container {color: #333333; /* 深灰色，比背景稍深 */
}

讲师特别指出：“字的颜色比我这个背景色稍微深一些”。这是 UI 设计的一项基本原则：前景文字必须与背景形成足够的对比度，确保可读性。

WCAG（Web 内容无障碍指南）建议普通文本至少达到 4.5:1 的对比度比率。可以使用在线工具如 https://webaim.org/resources/contrastchecker/ 进行检测。

✅ 正确示例：

background-color: #ffffcc;
color: #333333;
/* 对比度 ≈ 12.6:1，符合 AA/AAA 标准 */

❌ 错误示例：

background-color: #ffffcc;
color: #cccc99;
/* 对比度仅约 1.8:1，几乎无法阅读 */

2.2 字体大小控制：rpx 单位深入解析

什么是 `rpx`？

rpx（responsive pixel）是微信小程序特有的响应式像素单位，其设计理念是让页面在不同屏幕宽度的设备上自动适配。

在 iPhone 6/7/8 上（屏幕宽 375px），1rpx = 0.5px
因此，屏幕总宽为 750rpx（即 375 × 2）

这意味着无论用户使用的是 iPhone 还是安卓手机，只要设计师按照 750rpx 的基准宽度来布局，系统就会自动缩放元素尺寸以适应实际屏幕。

如何合理设置字体大小？

讲师尝试调整字体大小的过程如下：

“这调了一下字体大小……是不是太小了……来个35吧 40吧……有点大 30吧”

反映出开发者在实际调试中常遇到的问题：缺乏直观参考，需反复试错。

以下是推荐的字体大小参考表（基于 750rpx 设计稿）：

使用场景	推荐 rpx 大小	对应 px（iPhone6）
标题	36 - 44rpx	18 - 22px
正文	28 - 32rpx	14 - 16px
辅助说明 / 提示语	24 - 28rpx	12 - 14px
按钮文字	30 - 34rpx	15 - 17px
导航栏标题	34rpx	17px

因此，对于提示框内的文字，设置为 30rpx 是合理的折中选择：

.tip-container {font-size: 30rpx;
}

此外，还可以通过 font-weight 控制粗细，提升视觉层次：

font-weight: 500; /* 中等加粗，避免过重 */

2.3 圆角效果实现 —— `border-radius`

为了让矩形容器看起来更柔和、更具现代感，讲师引入了 border-radius 属性：

“我想让我这个东西有点圆角……写什么呢写这个 border radius”

语法如下：

.tip-container {border-radius: 20rpx; /* 所有角均为 20rpx 圆角 */
}

也可以分别设置四个角：

border-radius: 20rpx 10rpx 20rpx 0;
/* 顺时针：左上、右上、右下、左下 */

或者使用简写形式指定水平和垂直半径（椭圆角）：

border-radius: 20rpx / 10rpx;

💡 提示：一般移动端 UI 中，10rpx ~ 30rpx 的圆角最为常见，既能软化边缘又不会显得突兀。

圆角背后的数学原理

border-radius 实际上定义了一个圆弧的半径。当四个角的半径之和超过边长时，浏览器会自动裁剪，防止溢出。

例如，若盒子高 60rpx，左右圆角各设为 40rpx，则实际渲染为最大允许值（30rpx），避免变形。

2.4 外边距控制 —— `margin` 的四值语法

讲师演示了如何使用 margin 属性控制元素与其他元素之间的距离：

“写了这个上下右左……我这里写了个什么呢写了这个上下右左……Ctrl s 保存一下大家可以看到距离我上部是30距离我的下边是30……”

此处虽表述略显混乱，但核心意图明确：通过 margin 控制定位空间。

`margin` 的四种写法

写法	含义说明
`margin: 30rpx;`	四个方向统一为 30rpx
`margin: 30rpx 20rpx;`	上下=30rpx，左右=20rpx
`margin: 30rpx 20rpx 10rpx;`	上=30rpx，左右=20rpx，下=10rpx
`margin: 30rpx 20rpx 10rpx 5rpx;`	上=30，右=20，下=10，左=5（顺时针）

根据讲师描述，“上30、下30、左10、右10”应写作：

margin: 30rpx 10rpx;

因为第二参数代表左右两侧。

⚠️ 注意：CSS 中没有“上下右左”这种说法，正确术语是“上右下左”（Top, Right, Bottom, Left），简称 TRBL。

实际应用场景举例

假设页面顶部有一个提示条，希望它与上方导航栏留出空隙，同时左右贴边但内缩一点：

.tip-container {margin: 30rpx 20rpx 20rpx 20rpx;/* 上留白多些，其余均衡 */
}

2.5 内边距控制 —— `padding` 的作用与应用

讲师随后提到：

“我可以判定我的左侧判定Left假设我写个10rpx那大家可以看这里距我这里是不是就有点小距离了”

这里实际上指的是 内边距（padding），而非外边距。padding 控制内容与边框之间的空白区域。

正确使用 `padding-left`

.tip-container {padding-left: 20rpx;
}

这样可以使内部文字距离左边框 20rpx，避免紧贴边界带来的压抑感。

完整的 padding 设置示例：

.tip-container {padding: 20rpx;           /* 四周一致 */padding: 20rpx 30rpx;     /* 上下20，左右30 */padding: 10rpx 20rpx 15rpx 30rpx; /* TRBL */
}

`margin` 与 `padding` 的本质区别

属性	作用范围	是否影响背景色区域
`margin`	元素外部的空间	不包含在背景色范围内
`padding`	元素内部的内容周围空间	包含在背景色和边框之内

👉 可视化记忆法：想象一个带盖子的盒子。

margin 是盒子离墙的距离；
border 是盒子本身的木板；
padding 是盒子里泡沫垫的厚度；
content 是中间放的东西。

3. 布局基础知识补充

3.1 盒模型概述（Box Model）

CSS 盒模型是所有网页布局的基础概念。每个 HTML/WXML 元素都被视为一个矩形盒子，由以下四部分组成：

+-------------------------------------------+
|                  Margin                   |
|   +-----------------------------------+   |
|   |              Border             |   |
|   |   +-----------------------+   |   |
|   |   |       Padding         |   |   |
|   |   |   +---------------+   |   |   |
|   |   |   |   Content     |   |   |   |
|   |   |   +---------------+   |   |   |
|   |   +-----------------------+   |   |
|   +-----------------------------------+   |
+-------------------------------------------+

计算总占用宽度公式：

总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

在小程序中，默认情况下大多数元素为 块级元素（display: block），占据整行宽度。

3.2 margin 与 padding 的区别对比（表格总结）

特性	margin	padding
所属层级	外部空间	内部空间
是否受背景影响	否	是（背景延伸至此）
是否可设负值	✅ 可	❌ 不推荐（部分情况可行）
是否触发外边距合并	✅ 相邻块级元素会发生 collapse	❌ 不会
是否影响点击热区	否	是（触摸区域扩大）
是否可用于居中	✅ `margin: 0 auto` 实现水平居中	❌ 无法直接居中

3.3 常见布局误区及调试技巧

❌ 误区一：混淆 `margin` 和 `padding`

新手常误以为 margin-left 能让文字远离左边框，但实际上它只是移动整个盒子的位置。真正影响文字位置的是 padding-left。

✅ 解决方案：使用开发者工具审查元素

微信开发者工具提供强大的 DOM 查看器，可通过以下步骤验证：

打开模拟器；
右键点击目标元素 → “审查元素”；
观察右侧“盒模型图示”，查看各部分尺寸分布；
动态修改 margin/padding 数值观察变化。

❌ 误区二：过度依赖固定数值

有些开发者习惯写死 margin: 30px，但在不同机型上可能导致错位。

✅ 推荐做法：使用 `rpx` + 弹性布局组合

.container {padding: 30rpx;margin: 20rpx auto;max-width: 700rpx;
}

既保证响应式，又限制最大宽度防止拉伸过度。

4. 引入第三方图标库的重要性

4.1 为什么不能手动画图标？

讲师提出疑问：

“咱们又不会画……我们可以使用……阿里的史梁库？”

“史梁库”显然是语音识别错误，应为 “矢量库” 或具体平台名“IconFont”。

确实，绝大多数开发者不具备专业绘图能力，且手动绘制图标存在诸多弊端：

问题	描述
分辨率依赖	PNG 图放大后模糊，不适合高清屏
多尺寸维护成本高	需准备 @1x, @2x, @3x 多套资源
修改困难	改颜色需重新导出图片
文件体积大	多个图标导致包体积膨胀
无法动态控制样式	无法通过 CSS 控制旋转、缩放、颜色等

4.2 矢量图标的三大优势

采用字体图标（Font Icons）或 SVG 图标可解决上述问题，主要优势包括：

无限缩放不失真
- 基于数学路径描述，任意放大清晰可见。
样式可控性强
- 可通过 CSS 修改颜色、大小、阴影、旋转等。
加载效率高
- 多个图标打包成一个字体文件，减少 HTTP 请求。

4.3 主流图标库选型分析

图标库	特点	适用场景
阿里 IconFont	中文社区强大，图标丰富，支持 Base64，免费商用较多	国内项目首选
Font Awesome	国际主流，风格统一，文档完善，Pro 版收费	英文为主或国际化项目
Material Icons	Google 出品，遵循 Material Design 规范	Android 风格应用
Remix Icon	开源免费，现代简约风，支持按需导入	轻量化项目

讲师选择 阿里 IconFont 的理由充分：资源全、中文友好、操作简单、支持本地化部署（via Base64）。

5. 阿里 IconFont 实战接入全流程

5.1 注册与登录阿里 IconFont 平台

访问官网：https://www.iconfont.cn

步骤如下：

点击右上角【注册】按钮；
输入手机号或邮箱完成验证；
登录后进入主界面。

⚠️ 注意：需实名认证才能创建项目（部分高级功能受限）。

5.2 搜索并收藏所需图标

在搜索框输入关键词，如“提示”、“警告”、“安全”、“监控”、“密码”等。

系统将返回相关图标列表。用户可浏览预览，点击图标下方的 “添加至购物车” 按钮进行收藏。

🔍 示例搜索结果：

🔔 提示铃铛图标
🛡️ 安全盾牌
👁️ 监控眼睛
🔐 密码锁

每个图标均有多种风格可选（线性、面性、双色等），可根据项目 UI 风格挑选。

5.3 创建项目并添加图标至项目

点击顶部菜单【我的项目】→ 【新建项目】

填写项目信息：

项目名称：如 demo02
Font Class / Symbol 前缀：可留空或设为 icon-
生成方式：选择 Unicode 或 Font class（推荐后者）

确认后，回到购物车页面，将已收藏的图标逐一添加到该项目中。

✅ 添加成功后可在项目详情页看到所有图标列表。

5.4 配置项目输出格式：Base64 编码的重要性

关键一步：进入项目设置 → 开启 “Base64” 选项。

讲师强调：“别忘了在项目的设置里边选背64然后点保存”

“背64”即 Base64，是一种将二进制数据编码为文本字符串的技术。

Base64 的优势：

优势	说明
避免跨域问题	字体文件嵌入 CSS，无需额外请求
提升加载速度	减少 DNS 查询和网络延迟
支持离线使用	打包进小程序代码，断网仍可显示
防止资源丢失	不依赖远程服务器稳定性

Base64 的缺点：

劣势	说明
CSS 文件变大	每增加一个图标，CSS 增长约 1~2KB
更新不便	修改图标需重新生成并替换全部代码
初次加载时间略长	大段 Base64 数据阻塞样式解析

📌 建议：中小型项目（<20个图标）推荐使用 Base64；大型项目可考虑 CDN + 缓存策略。

5.5 下载或生成在线 CSS 引用链接

完成设置后，点击【生成代码】按钮。

系统将生成一段包含字体声明和类名映射的 CSS 代码，并提供一个 URL 链接：

// 示例链接（非真实）
https://at.alicdn.com/t/font_1234567 abcdefg.css

该链接指向托管在阿里 CDN 上的 CSS 文件，内容类似：

@font-face {font-family: 'iconfont';src: url('data:application/x-font-woff;charset=utf-8;base64,d09GMgABAAAAAA...') format('woff');
}.icon-tips:before {font-family: "iconfont";content: "\e601";
}.icon-security:before {content: "\e602";
}

5.6 在小程序中正确引入远程字体资源

方法一：直接 `@import` 远程 CSS（推荐用于测试）

在 app.wxss 中引入：

@import url('https://at.alicdn.com/t/font_1234567_abcdefg.css');/* 全局可用 .icon-tips 等类 */

⚠️ 注意事项：

必须使用 HTTPS 协议；
域名需在小程序后台【下载域名列表】中配置白名单；
若未配置，会出现 NetWorkError。

方法二：本地化存储（生产环境推荐）

新建目录结构：

/static/└── css/└── iconfont.wxss

将生成的 CSS 内容复制粘贴至 iconfont.wxss 文件中；
在 app.wxss 中引入本地文件：
```
@import "/static/css/iconfont.wxss";
```

优点：

不依赖外网；
加载更快；
易于版本控制。

6. 静态资源管理规范

6.1 小程序目录结构最佳实践

标准项目结构建议如下：

/miniprogram├── pages/│   ├── index/│   └── logs/├── components/         # 自定义组件├── utils/              # 工具函数├── assets/             # 图片资源├── static/             # 静态资源（CSS、字体、JSON等）│   └── css/│       └── iconfont.wxss├── app.js├── app.json└── app.wxss            # 全局样式入口

讲师原计划建立 /static/font/，但后来改为 /static/css/，体现灵活性。但从语义化角度，建议分类存放。

6.2 static 文件夹的作用与组织方式

static 目录用于存放不会被编译处理的静态资源，主要包括：

类型	存放路径示例
字体文件	`/static/fonts/`
第三方 CSS	`/static/css/third-party.wxss`
JSON 数据	`/static/data/config.json`
SVG 图标	`/static/icons/`

命名建议：

文件名使用小写字母 + 连字符（kebab-case）；
.wxss 扩展名表明是小程序专用样式表；
避免中文路径。

6.3 CSS 文件分离策略：全局样式 vs 局部样式

全局样式：`app.wxss`

适用于所有页面共享的样式规则：

/* app.wxss */
@import "/static/css/iconfont.wxss";body {font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}.text-center {text-align: center;
}

局部样式：页面专属 `.wxss`

每个页面有自己的 .wxss 文件，优先级高于全局样式：

/* pages/index/index.wxss */
.banner {height: 300rpx;background: linear-gradient(to right, #ffecd2, #fcb69f);
}

组件样式：独立封装

自定义组件内的样式默认隔离，除非设置 styleIsolation: apply-shared。

7. 样式引入机制详解

7.1 使用 `@import` 引入外部 CSS

语法格式：

@import url('/path/to/stylesheet.wxss');
@import "another.wxss";

特点：

必须放在文件最前面（@charset 除外）；
支持相对路径和绝对路径；
可嵌套引入（A 引 B，B 引 C）；
不支持条件引入（如 media query 内使用）；

示例：

/* app.wxss */
@import "/static/css/reset.wxss";
@import "/static/css/iconfont.wxss";
@import "/static/css/common.wxss";

7.2 页面级样式与组件样式优先级

优先级从高到低排列：

内联样式（style="{{dynamic}}"）→ 最高
页面 WXSS（如 index.wxss）
组件 WXSS（组件自身样式）
全局 WXSS（app.wxss）
微信默认样式

可通过 !important 提升优先级，但应慎用。

7.3 全局样式文件 `app.wxss` 的作用域

app.wxss 中定义的类在整个小程序中均可使用，无需重复引入。

例如：

/* app.wxss */
.bg-yellow {background-color: #ffffcc;
}
.text-large {font-size: 36rpx;
}

在任意 WXML 中均可直接使用：

<view class="bg-yellow text-large">这是一个大号黄色背景的文字</view>

8. 常见问题排查与优化建议

8.1 图标不显示的可能原因

问题现象	可能原因	解决方法
图标显示为方框	Unicode 编码错误	检查 `content: "\e6xx"` 是否匹配
图标完全不出现	字体未加载	检查 `@font-face` 是否生效
图标颜色不对	未设置 `color`	显式设置文字颜色
图标过大或过小	`font-size` 未设置	统一设置合适的 `font-size`
页面报错 Network Error	域名未备案	在小程序管理后台添加 download 域名

8.2 Base64 与 CDN 加载性能权衡

方案	首次加载	缓存能力	网络依赖	适用场景
Base64	较慢	强	无	小项目、离线需求
CDN + Cache	快	强	有	大项目、稳定网络环境

📌 推荐策略：开发阶段用 CDN 快速迭代；上线前切换为 Base64 提高稳定性。

8.3 小程序样式兼容性注意事项

不支持某些 CSS3 属性（如 filter, clip-path）；
动画帧率受限于 WebView 性能；
部分安卓机对 flex 布局支持较差；
position: fixed 在输入法弹出时可能失效。

建议使用官方推荐的布局方案：flexbox + rpx + viewport units。

9. 扩展知识：现代前端图标解决方案

9.1 SVG Sprite 技术原理

将多个 SVG 图标合并为一张雪碧图（Sprite Sheet），通过 background-position 切换显示区域。

优点：

矢量不失真；
支持多彩图标；
可压缩合并。

缺点：

维护复杂；
不如字体灵活。

9.2 自定义字体图标打包工具

除了阿里 IconFont，还可使用：

IcoMoon App（https://icomoon.io）：支持上传 SVG 自动生成字体；
Fontello（http://fontello.com）：开源替代品；
Glyphhanger：命令行工具，适合自动化构建。

9.3 微信原生组件中的图标支持情况

微信提供了部分内置图标组件，如：

<icon type="success" size="24" color="#00C853"/>
<icon type="warn" size="20" color="#FFAB00"/>
<icon type="clear" size="16" color="#999"/>

类型包括：success, info, warn, waiting, cancel, download, search, clear 等。

局限性：

数量有限；
样式不可定制；
无法满足个性化需求。

因此仍需依赖第三方图标库。

10. 总结与学习路径推荐

本次课程核心收获总结

模块	关键知识点
基础样式	`background-color`, `color`, `font-size`, `border-radius`
布局控制	`margin`, `padding`, `rpx` 单位、盒模型理解
图标集成	阿里 IconFont 使用流程、Base64 配置、@import 引入
资源管理	static 目录组织、CSS 分离、全局样式引用
开发规范	类名命名、路径规范、优先级控制

后续学习路径建议

深入学习 Flex 布局
- 掌握 display: flex、justify-content、align-items
- 实现九宫格、瀑布流、导航栏等常见布局
掌握小程序组件化开发
- 创建自定义组件（Component 构造器）
- 属性传递、事件通信、插槽（slot）
学习 SCSS/Sass 预处理器
- 使用变量、嵌套、混合（mixin）提升 CSS 可维护性
- 配合构建工具（如 gulp）自动编译为 WXSS
探索 TypeScript + 小程序开发
- 提高代码健壮性，减少运行时错误
- 使用 Taro、uni-app 等跨端框架
性能优化专题
- 图片懒加载、骨架屏、setData 优化、分包加载

附录 A：完整代码示例汇总

WXML 结构

<!-- pages/tips/tips.wxml -->
<view class="tip-container"><text class="iconfont icon-tips"></text><text class="tip-text">这是一条重要提示信息</text>
</view>

WXSS 样式

/* pages/tips/tips.wxss */
.tip-container {display: flex;align-items: center;background-color: #ffffcc;color: #333333;font-size: 30rpx;font-weight: 500;border-radius: 20rpx;margin: 30rpx 20rpx;padding: 20rpx 30rpx 20rpx 10rpx;
}.tip-container .iconfont {font-size: 40rpx;margin-right: 15rpx;color: #e6a23c; /* 橙色强调 */
}

全局样式引入

/* app.wxss */
@import "/static/css/iconfont.wxss";page {background-color: #f5f5f5;
}

附录 B：常用 rpx 尺寸对照表

设备	屏幕宽度(px)	1rpx = ? px	总宽度(rpx)
iPhone SE (1st)	320px	0.427px	750rpx
iPhone 8	375px	0.5px	750rpx
iPhone 14 Pro Max	430px	0.573px	750rpx
小米 13 Ultra	1440px	1.92px	750rpx

所有设备均映射为 750rpx 宽度，实现响应式适配。

附录 C：阿里 IconFont 项目配置截图说明（文字版）

项目设置页：
- 名称：demo02
- Font Class: icon-
- 格式：ttf, woff, svg
- ✔️ 启用 Base64 编码
- 保存设置
生成代码页：
- 点击【生成】按钮
- 复制输出的 CSS 内容
- 替换本地 iconfont.wxss 文件内容
图标映射表：

图标名 Unicode Class Name
提示 \e601 .icon-tips
安全 \e602 .icon-security
密码 \e603 .icon-password