AI语音智能体开发日记（十）LVGL 图标字体实战——从 FontAwesome 到屏幕显示

图标库	免费商用	说明
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.2，fontawesome-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/fontconverter
- Name: 给字体起个名字，例如 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/* U+0078 "x" */
20x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0xc,
3// ... (图标位图数据)
```
这段注释 /* U+0078 "x" */ 告诉我们，这个位图数据对应的就是 Unicode 0x0078，也就是字符 "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);
    }
}