How to add custom symbols to custom font

How-to
1

Description

I need to add custom symbols to a custom font, but I don’t understand how to do it as mentionned in link
the problem is in free version of Fontawesome, i can’t upload a custom icones,
and i couldn’t understand how to use lv_font_conv,
is there any tutorial ?
someone have an idea how to do it ?

What MCU/Processor/Board and compiler are you using?

vs code simulator

What LVGL version are you using?

8.3.7

2

you are referencing the latest lvgl v9 dev documentation.
If you using 8.3.7, this is the documentation

image
image2530×1178 151 KB

for example, the LV_SYMBOL_AUDIO,
on the fontawsome site, you can see the unicode f001, refer to above documentation, you need to get a ‘\xEF\x80\x81’ from the unicode.

check out this file lv_symbol_def.h

#define LV_SYMBOL_AUDIO           "\xEF\x80\x81" /*61441, 0xF001*/

or you can see the options from default montserrat font

node ./lv_font_conv/lv_font_conv.js --no-compress --no-prefilter
 --bpp 4 --size 14 --font Montserrat-Medium.ttf -r 0x20-0x7F,0xB0,0x2022 
--font FontAwesome5-Solid+Brands+Regular.woff -r 61441,62212,
62189,62810,63426,63650 --format lvgl -o lv_font_montserrat_14.c 
--force-fast-kern-format
3

if you are using latest v9 dev, with offline lv_font_conv, see the generated $YOUR_FONT_NAME.c file.

#include "lvgl/lvgl.h"

this should be changed to

#include "../../lvgl.h"

check out this lvgl/scripts/built_in_font/generate_all.py , on line 86

4

Hello,

Thank for your response, sorry i used the link for master version
I’m using LVGL 8.3.10,

What i really need is the possibility to add custom icons that doesn’t exist in fontawesome, but i need to add symbols too from fontawesome,

i don’t understand how to use lv_font_conv, if you can explain, thank you

what it contains the file “FontAwesome5-Solid+Brands+Regular.woff”, is it a link to data base of fontawesome ?

1 Like
5

to add custom icons that doesn’t exist in fontawesome
What about using jpg,png image icon file ?

FontAwesome5-Solid+Brands+Regular.woff is free version of fontawesme web font file, you can download from fontawesome website or lvgl repository. (if you are using pro version, find more font file from fontawesome site.)

> git clone https://github.com/lvgl/lv_font_conv.git
> cd lv_font_conv
> npm install
> cp /???/Montserrat-Medium.ttf .
> cp /???/FontAwesome5-Solid+Brands+Regular.woff .

Copy the font files to current lv_font_conv folder

node ./lv_font_conv.js --no-compress --no-prefilter
 --bpp 4 --size 14 --font ./Montserrat-Medium.ttf -r 0x20-0x7F,0xB0,0x2022 
--font ./FontAwesome5-Solid+Brands+Regular.woff -r 61441,62212,
62189,62810,63426,63650 --format lvgl -o lv_font_montserrat_14.c 
--force-fast-kern-format

this means,
from Montserrat-Medium.ttf file, add font range 0x20-0x7F,0xB0,0x2022,
from FontAwesome5-Solid+Brands+Regular.woff file, add font range 61441,62212,
62189,62810,63426,63650
with options, --bpp 4 --size 14,–no-compress, --no-prefilter,–force-fast-kern-format
and export to the file name of “lv_font_montserrat_14.c”.
you can see the lv_font_montserrat_14.c file on current folder.

you could make your own custom *.c file, specify the output file name, size, font range and symbol code from fontawesome file.
copy it to lvgl/src/font folder, modify symbol definition on lv_symbol_def.h

1 Like
6

Thank you so much for explanation, it worked :+1:

I’m not a pro user in fontawesome :frowning: so the only way to use custom icons is by buying a pro access in fontawesome ?

I want to use icons in tabview and button matrix, but with the actual version of LVGL it’s not possible, it takes only text

7

Have you tried Image font in LVGL here

I never tried but i think tab view may inherit label function. :slight_smile:

ps. i meant a pro user could use pro icons, not sure about custom icon.

1 Like
8

No, I’ll try it if it works, but button matrix doesn’t inherit label function, the text is declared in cntrl_map, and for tabview the title is declared when we add a tab lv_tabview_add_tab(tabview,"title") this function add the text in cntrl_map of button matrix,
I don’t think image font will work in this case

i understood, and i saw that is possible for a pro user to add custom icons to own kit in Fontawesome

9

lvgl is using a label function in,

lv_tabview_add_tab(tabview,“title”)

lv_obj_t * lv_tabview_add_tab(lv_obj_t * obj, const char * name)
{
    ...,
    lv_obj_t * label = lv_label_create(button);
    lv_label_set_text(label, name);
    lv_obj_center(label);

I think you can use image font in tabview :slight_smile:

1 Like
10

in LVGL 8.3 it doesn’t have a label and a real buttons,
this is new version of LVGL 9 Master,
I don’t think it’s a good idea to switch to latest version and when there’s no release version yet.
i’ll see if i could integrate only the widget tabview in my version,
Thank you