超好用的图标库在LVGL上的转换与支持

1.前言

上一篇文章，写了常用的图标库有哪些，本文章就以阿里图标库Iconfont为例，写写图标库到底是个啥！以及，如何使用在LVGL之中。

2.图标其实是一种字体

首先，我们注册iconfont，然后把自己心仪的图标加入购物车，最后进入购物车，选择下载源代码即可。举个栗子，下图就是我下载下来的图标内容：

第一次看到这几个文件时，不知道有什么用，可能会直接删除，但万万不可，打开 iconfont.css 文件可以在 @font-face 中都有引用这几个文件。查询资料后得知：虽然现代浏览器支持自定义字体样式，并且可以通过 @font-face 引入自定义的字体，但是各个浏览器对于字体样式是存在兼容性问题的，而这几个文件就是分别处理对应浏览兼容性问题的。

在写这篇文章之前，我一直以为上图中的“图标”是一个个的图片组成，但学习总是给人新知，现在我知道了它们只是一种字体，类似于“宋体”、“楷体”这种。如果我们要使用它们，也只需要在 css 文件中使用 @font-face 引入这种字体即可。@font-face 是 css3 的一个语法，刚兴趣的可以自行阅读 @font-face 用法 。

3.LVGL图标转换

对于图标这种字体转换，和普通字体转换类似，唯一不同的是就是需要输入你的图标的Unicode编码。在图标源码中，有两个文件需要注意：

1. iconfont.json：内部有unicode编码，而我们则需要将Unicode编码转成Utf-8编码，可以自行百度。
2. iconfont.ttf：则和普通的字体转换一样，使用LVGL官方的字体转换工具进行转换。需要注意的是：range那一项填写unicode值即可。

4.使用第三方图标

建议把该文件放到项目工程文件夹里面，然后使用我们的 CUBE 工具，输入命令 scons --ide=mdk5 -s 把它加入编译系统中去。或者，自己使用 keil 手动添加也是可以的。 其次，就是如何使用自己的定制字体，代码如下：

    #define MY_ICON_RILI "\xF0\x90\x83\x88"
    LV_FONT_DECLARE(lv_font_icon);
    lv_obj_t *label = lv_label_create(lv_scr_act());
    lv_obj_set_style_text_font(label,&lv_font_icon,0);
    lv_label_set_text(label,MY_ICON_RILI);

5.关注&&联系

开源轻量操作系统： https://gitee.com/cmcc-oneos/OneOS-Lite

docs文档中心： https://oneos-lite.com/

知知乎乎：蓁蓁

{{o.name}}

{{m.name}}