相关链接AI语音智能体开发日记一如何为“小智”服务器启用并调试 License 功能-CSDN博客AI语音智能体开发日记二解决 Wi-Fi 配网小程序的兼容性问题-CSDN博客AI语音智能体开发日记三解决小程序配网中的蓝牙命名与MAC地址获取问题-CSDN博客AI语音智能体开发日记四在FreeRTOS中构建线程安全的UART2通信模块-CSDN博客AI语音智能体开发日记五为智能设备注入“灵魂”——详解MCP工具的注册与使用-CSDN博客AI语音智能体开发日记六为智能体注入旋律——七牛云音乐服务的接入与避坑指南-CSDN博客AI语音智能体开发日记七搞定功放控制——详解GX8006平台Mute电平配置-CSDN博客AI语音智能体开发日记八LVGL 8.4.0 移植实战——从零构建嵌入式GUI-CSDN博客AI语音智能体开发日记九LVGL 8.4.0 中文字体配置全攻略-CSDN博客AI语音智能体开发日记十LVGL 图标字体实战——从 FontAwesome 到屏幕显示-CSDN博客AI语音智能体开发日记十一为智能设备“声”临其境——详解音频资源自动化生成流程-CSDN博客AI语音智能体开发日记十二GX8006 固件定制指南——从双唤醒词到 UART 音频传输-CSDN博客AI语音智能体开发日记十三一次由寄存器溢出引发的串口波特率“玄学”问题排查-CSDN博客推荐链接AI语音智能体架构解析一系统架构全景图-CSDN博客AI语音智能体架构解析二大模型AI 的大脑-CSDN博客AI语音智能体架构解析三智控台指挥中心-CSDN博客AI语音智能体架构解析四AI 语音终端执行器官-CSDN博客AI语音智能体架构解析五小程序/APP遥控器-CSDN博客推荐链接AI 应用 图文 解说 (一) -- 百度智能云 实现 语音 聊天-CSDN博客AI 应用 图文 解说 (二) -- 百度智能云 ASR LIM TTS 语音AI助手程序 -CSDN博客开发手记LVGL 图标字体实战——从 FontAwesome 到屏幕显示在嵌入式GUI开发中图标是提升界面美观度和信息传达效率的关键元素。相比于使用多张独立的图片使用图标字体Icon Font具有体积小、易于缩放、颜色可变等显著优势。今天这篇博客我将详细记录在 LVGL 8.4.0 项目中集成 FontAwesome 图标字体的完整流程。我们将以显示一个 WiFi 图标为例解决从字体选择、转换到代码调用的所有问题。第一步选择合适的图标字体库首先我们需要选择一个免费且可商用的图标字体库。市面上有许多优秀的选择例如图标库免费商用说明FontAwesome Free✅ 完全免费包含 Solid/Regular/Brands 三种风格足够日常使用Material Icons✅ 完全免费Google 开源Apache 2.0 协议Remix Icon✅ 完全免费国内开源可商用Bootstrap Icons✅ 完全免费MIT 协议本次实战我们选择最流行的FontAwesome Free。https://github.com/FortAwesome/Font-Awesome/releases/tag/6.5.2fontawesome-free-6.5.2-web.zip第二步下载与转换字体文件LVGL 无法直接使用.ttf格式的字体文件我们需要将其转换为 C 语言数组。下载字体文件前往 FontAwesome 的 GitHub Release 页面下载fontawesome-free-6.5.2-web.zip。解压后我们需要的字体文件位于webfonts文件夹内本次我们使用fa-solid-900.ttf。在线转换字体使用 LVGL 官方提供的在线字体转换工具https://lvgl.io/tools/fontconverterName: 给字体起个名字例如weather。Size: 设置字体大小例如16。Bpp: 设置为4 bit-per-pixel在清晰度和内存占用间取得平衡。TTF/WOFF font: 上传我们刚刚找到的fa-solid-900.ttf文件。Range: 这是最关键的一步。我们需要输入想要转换的图标的 Unicode 编码。例如我们想显示一个 x 图标其 Unicode 为0x0078。因此在这里填入0x0078。点击“Submit”按钮下载生成好的weather.c文件。可以用http://blog.luckly-mjw.cn/tool-show/iconfont-preview/index.html进行字体验证第三步将字体文件集成到工程放置文件将生成的weather.c文件复制到 LVGL 的字体目录下project/ln_model_public/components/gui/lvgl-8.4.0/src/font/。理解生成的代码打开weather.c文件我们可以看到图标数据被存储在glyph_bitmap数组中。1/* U0078 x */ 20x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0xc, 3// ... (图标位图数据)这段注释/* U0078 x */告诉我们这个位图数据对应的就是 Unicode0x0078也就是字符 x。第四步在 LVGL 中注册并使用图标文件就位后我们需要在 LVGL 的配置文件中声明它并编写代码来显示。在lv_conf.h中声明字体打开lv_conf.h文件找到LV_FONT_CUSTOM_DECLARE宏添加我们的字体声明1#define LV_FONT_CUSTOM_DECLARE \ 2 LV_FONT_DECLARE(alFont12) \ 3 LV_FONT_DECLARE(alFont18) \ 4 LV_FONT_DECLARE(alFont24) \ 5 LV_FONT_DECLARE(weather) // 添加这一行编写代码显示图标在我们的应用代码usr_app.c中创建一个标签Label来显示图标。#define ICON_WIFI \x78 // WiFi图标 void create_ui(void) { // WiFi 图标 - 白色 lv_obj_t *wifi lv_label_create(lv_scr_act()); lv_obj_set_style_text_font(wifi, weather, 0); lv_label_set_text(wifi, ICON_WIFI); lv_obj_set_style_text_color(wifi, lv_color_hex(0xFFFFFF), 0); lv_obj_set_pos(wifi, 10, 5); } lv_ui guider_ui; static void usr_app_task_entry(void *params) { //初始化LVGL lv_init(); //初始化显示驱动 lv_port_disp_init(); // 创建新屏幕并加载 lv_obj_t *screen lv_obj_create(NULL); lv_scr_load(screen); // 设置屏幕背景颜色为黑色且不透明 lv_obj_set_style_bg_color(screen, lv_color_hex(0x000000), LV_PART_MAIN); lv_obj_set_style_bg_opa(screen, LV_OPA_COVER, LV_PART_MAIN); create_ui(); /* // 1. 左上角显示 2026 lv_obj_t *label_year lv_label_create(screen); lv_label_set_text(label_year, 2026); lv_obj_set_style_text_font(label_year, alFont12, LV_PART_MAIN | LV_STATE_DEFAULT); lv_obj_set_style_text_color(label_year, lv_color_hex(0xFFFFFF), 0); lv_obj_align(label_year, LV_ALIGN_TOP_LEFT, 10, 10); // 距离左边10px顶部10px // 2. 左上第二排显示 重庆 lv_obj_t *label_city lv_label_create(screen); lv_label_set_text(label_city, 17:17); lv_obj_set_style_text_font(label_city, alFont24, LV_PART_MAIN | LV_STATE_DEFAULT); lv_obj_set_style_text_color(label_city, lv_color_hex(0xFFFFFF), 0); lv_obj_align(label_city, LV_ALIGN_TOP_LEFT, 10, 40); // 距离左边10px顶部40px // 3. 左下角显示 7月6日 lv_obj_t *label_date lv_label_create(screen); lv_label_set_text(label_date, 7月6日); lv_obj_set_style_text_font(label_date, alFont12, LV_PART_MAIN | LV_STATE_DEFAULT); lv_obj_set_style_text_color(label_date, lv_color_hex(0xFFFFFF), 0); lv_obj_align(label_date, LV_ALIGN_BOTTOM_LEFT, 10, -10); // 距离左边10px底部10px // 4. 右下角显示 星期一 lv_obj_t *label_week lv_label_create(screen); lv_label_set_text(label_week, 星期一); lv_obj_set_style_text_font(label_week, alFont12, LV_PART_MAIN | LV_STATE_DEFAULT); lv_obj_set_style_text_color(label_week, lv_color_hex(0xFFFFFF), 0); lv_obj_align(label_week, LV_ALIGN_BOTTOM_RIGHT, -10, -10); // 距离右边10px底部10px */ //setup_ui(guider_ui); while(1) { lv_tick_inc(100); lv_task_handler(); OS_MsDelay(100); } }这里需要注意#define ICON_WIFI \x78这个定义来自库中包含的字的UNICODE编码为0X78将0XE911转换为UTF8格式为\x78显示的是总结通过以上四个步骤我们成功地在 LVGL 项目中集成并显示了一个 FontAwesome 图标。核心流程可以概括为选库下载选择 FontAwesome 等免费图标库并下载.ttf文件。在线转换使用 LVGL 工具将.ttf转为.c文件关键是填入正确的 UnicodeRange。工程集成将.c文件放入工程并在lv_conf.h中声明。代码调用创建lv_label设置其字体为自定义字体文本为对应的 Unicode 字符如\x78。这种方法极大地丰富了嵌入式界面的表现力是 GUI 开发中非常实用的技巧。 AI语音智能体开发日记（十）LVGL 图标字体实战——从 FontAwesome 到屏幕显示
相关链接AI语音智能体开发日记一如何为“小智”服务器启用并调试 License 功能-CSDN博客AI语音智能体开发日记二解决 Wi-Fi 配网小程序的兼容性问题-CSDN博客AI语音智能体开发日记三解决小程序配网中的蓝牙命名与MAC地址获取问题-CSDN博客AI语音智能体开发日记四在FreeRTOS中构建线程安全的UART2通信模块-CSDN博客AI语音智能体开发日记五为智能设备注入“灵魂”——详解MCP工具的注册与使用-CSDN博客AI语音智能体开发日记六为智能体注入旋律——七牛云音乐服务的接入与避坑指南-CSDN博客AI语音智能体开发日记七搞定功放控制——详解GX8006平台Mute电平配置-CSDN博客AI语音智能体开发日记八LVGL 8.4.0 移植实战——从零构建嵌入式GUI-CSDN博客AI语音智能体开发日记九LVGL 8.4.0 中文字体配置全攻略-CSDN博客AI语音智能体开发日记十LVGL 图标字体实战——从 FontAwesome 到屏幕显示-CSDN博客AI语音智能体开发日记十一为智能设备“声”临其境——详解音频资源自动化生成流程-CSDN博客AI语音智能体开发日记十二GX8006 固件定制指南——从双唤醒词到 UART 音频传输-CSDN博客AI语音智能体开发日记十三一次由寄存器溢出引发的串口波特率“玄学”问题排查-CSDN博客推荐链接AI语音智能体架构解析一系统架构全景图-CSDN博客AI语音智能体架构解析二大模型AI 的大脑-CSDN博客AI语音智能体架构解析三智控台指挥中心-CSDN博客AI语音智能体架构解析四AI 语音终端执行器官-CSDN博客AI语音智能体架构解析五小程序/APP遥控器-CSDN博客推荐链接AI 应用 图文 解说 (一) -- 百度智能云 实现 语音 聊天-CSDN博客AI 应用 图文 解说 (二) -- 百度智能云 ASR LIM TTS 语音AI助手程序 -CSDN博客开发手记LVGL 图标字体实战——从 FontAwesome 到屏幕显示在嵌入式GUI开发中图标是提升界面美观度和信息传达效率的关键元素。相比于使用多张独立的图片使用图标字体Icon Font具有体积小、易于缩放、颜色可变等显著优势。今天这篇博客我将详细记录在 LVGL 8.4.0 项目中集成 FontAwesome 图标字体的完整流程。我们将以显示一个 WiFi 图标为例解决从字体选择、转换到代码调用的所有问题。第一步选择合适的图标字体库首先我们需要选择一个免费且可商用的图标字体库。市面上有许多优秀的选择例如图标库免费商用说明FontAwesome Free✅ 完全免费包含 Solid/Regular/Brands 三种风格足够日常使用Material Icons✅ 完全免费Google 开源Apache 2.0 协议Remix Icon✅ 完全免费国内开源可商用Bootstrap Icons✅ 完全免费MIT 协议本次实战我们选择最流行的FontAwesome Free。https://github.com/FortAwesome/Font-Awesome/releases/tag/6.5.2fontawesome-free-6.5.2-web.zip第二步下载与转换字体文件LVGL 无法直接使用.ttf格式的字体文件我们需要将其转换为 C 语言数组。下载字体文件前往 FontAwesome 的 GitHub Release 页面下载fontawesome-free-6.5.2-web.zip。解压后我们需要的字体文件位于webfonts文件夹内本次我们使用fa-solid-900.ttf。在线转换字体使用 LVGL 官方提供的在线字体转换工具https://lvgl.io/tools/fontconverterName: 给字体起个名字例如weather。Size: 设置字体大小例如16。Bpp: 设置为4 bit-per-pixel在清晰度和内存占用间取得平衡。TTF/WOFF font: 上传我们刚刚找到的fa-solid-900.ttf文件。Range: 这是最关键的一步。我们需要输入想要转换的图标的 Unicode 编码。例如我们想显示一个 x 图标其 Unicode 为0x0078。因此在这里填入0x0078。点击“Submit”按钮下载生成好的weather.c文件。可以用http://blog.luckly-mjw.cn/tool-show/iconfont-preview/index.html进行字体验证第三步将字体文件集成到工程放置文件将生成的weather.c文件复制到 LVGL 的字体目录下project/ln_model_public/components/gui/lvgl-8.4.0/src/font/。理解生成的代码打开weather.c文件我们可以看到图标数据被存储在glyph_bitmap数组中。1/* U0078 x */ 20x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0xc, 3// ... (图标位图数据)这段注释/* U0078 x */告诉我们这个位图数据对应的就是 Unicode0x0078也就是字符 x。第四步在 LVGL 中注册并使用图标文件就位后我们需要在 LVGL 的配置文件中声明它并编写代码来显示。在lv_conf.h中声明字体打开lv_conf.h文件找到LV_FONT_CUSTOM_DECLARE宏添加我们的字体声明1#define LV_FONT_CUSTOM_DECLARE \ 2 LV_FONT_DECLARE(alFont12) \ 3 LV_FONT_DECLARE(alFont18) \ 4 LV_FONT_DECLARE(alFont24) \ 5 LV_FONT_DECLARE(weather) // 添加这一行编写代码显示图标在我们的应用代码usr_app.c中创建一个标签Label来显示图标。#define ICON_WIFI \x78 // WiFi图标 void create_ui(void) { // WiFi 图标 - 白色 lv_obj_t *wifi lv_label_create(lv_scr_act()); lv_obj_set_style_text_font(wifi, weather, 0); lv_label_set_text(wifi, ICON_WIFI); lv_obj_set_style_text_color(wifi, lv_color_hex(0xFFFFFF), 0); lv_obj_set_pos(wifi, 10, 5); } lv_ui guider_ui; static void usr_app_task_entry(void *params) { //初始化LVGL lv_init(); //初始化显示驱动 lv_port_disp_init(); // 创建新屏幕并加载 lv_obj_t *screen lv_obj_create(NULL); lv_scr_load(screen); // 设置屏幕背景颜色为黑色且不透明 lv_obj_set_style_bg_color(screen, lv_color_hex(0x000000), LV_PART_MAIN); lv_obj_set_style_bg_opa(screen, LV_OPA_COVER, LV_PART_MAIN); create_ui(); /* // 1. 左上角显示 2026 lv_obj_t *label_year lv_label_create(screen); lv_label_set_text(label_year, 2026); lv_obj_set_style_text_font(label_year, alFont12, LV_PART_MAIN | LV_STATE_DEFAULT); lv_obj_set_style_text_color(label_year, lv_color_hex(0xFFFFFF), 0); lv_obj_align(label_year, LV_ALIGN_TOP_LEFT, 10, 10); // 距离左边10px顶部10px // 2. 左上第二排显示 重庆 lv_obj_t *label_city lv_label_create(screen); lv_label_set_text(label_city, 17:17); lv_obj_set_style_text_font(label_city, alFont24, LV_PART_MAIN | LV_STATE_DEFAULT); lv_obj_set_style_text_color(label_city, lv_color_hex(0xFFFFFF), 0); lv_obj_align(label_city, LV_ALIGN_TOP_LEFT, 10, 40); // 距离左边10px顶部40px // 3. 左下角显示 7月6日 lv_obj_t *label_date lv_label_create(screen); lv_label_set_text(label_date, 7月6日); lv_obj_set_style_text_font(label_date, alFont12, LV_PART_MAIN | LV_STATE_DEFAULT); lv_obj_set_style_text_color(label_date, lv_color_hex(0xFFFFFF), 0); lv_obj_align(label_date, LV_ALIGN_BOTTOM_LEFT, 10, -10); // 距离左边10px底部10px // 4. 右下角显示 星期一 lv_obj_t *label_week lv_label_create(screen); lv_label_set_text(label_week, 星期一); lv_obj_set_style_text_font(label_week, alFont12, LV_PART_MAIN | LV_STATE_DEFAULT); lv_obj_set_style_text_color(label_week, lv_color_hex(0xFFFFFF), 0); lv_obj_align(label_week, LV_ALIGN_BOTTOM_RIGHT, -10, -10); // 距离右边10px底部10px */ //setup_ui(guider_ui); while(1) { lv_tick_inc(100); lv_task_handler(); OS_MsDelay(100); } }这里需要注意#define ICON_WIFI \x78这个定义来自库中包含的字的UNICODE编码为0X78将0XE911转换为UTF8格式为\x78显示的是总结通过以上四个步骤我们成功地在 LVGL 项目中集成并显示了一个 FontAwesome 图标。核心流程可以概括为选库下载选择 FontAwesome 等免费图标库并下载.ttf文件。在线转换使用 LVGL 工具将.ttf转为.c文件关键是填入正确的 UnicodeRange。工程集成将.c文件放入工程并在lv_conf.h中声明。代码调用创建lv_label设置其字体为自定义字体文本为对应的 Unicode 字符如\x78。这种方法极大地丰富了嵌入式界面的表现力是 GUI 开发中非常实用的技巧。