How to add custom symbols to custom font

How-to
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