1.前言
上一篇文章,写了常用的图标库有哪些,本文章就以阿里图标库Iconfont为例,写写图标库到底是个啥!以及,如何使用在LVGL之中。
2.图标其实是一种字体
首先,我们注册iconfont,然后把自己心仪的图标加入购物车,最后进入购物车,选择下载源代码即可。举个栗子,下图就是我下载下来的图标内容:
[图片上传失败...(image-2b07c0-1653268938126)]
第一次看到这几个文件时,不知道有什么用,可能会直接删除,但万万不可,打开 iconfont.css 文件可以在 @font-face 中都有引用这几个文件。查询资料后得知:虽然现代浏览器支持自定义字体样式,并且可以通过 @font-face 引入自定义的字体,但是各个浏览器对于字体样式是存在兼容性问题的,而这几个文件就是分别处理对应浏览兼容性问题的。
在写这篇文章之前,我一直以为上图中的“图标”是一个个的图片组成,但学习总是给人新知,现在我知道了它们只是一种字体,类似于“宋体”、“楷体”这种。如果我们要使用它们,也只需要在 css 文件中使用 @font-face 引入这种字体即可。@font-face 是 css3 的一个语法,刚兴趣的可以自行阅读 @font-face 用法 。
3.LVGL图标转换
对于图标这种字体转换,和普通字体转换类似,唯一不同的是就是需要输入你的图标的Unicode编码。在图标源码中,有两个文件需要注意:
-
iconfont.json
:内部有unicode编码,而我们则需要将Unicode编码转成Utf-8编码,可以自行百度。 -
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/
知知乎乎:蓁蓁