How to create fonts v8.4

How-to
1

Description

I’m struggling to create a single font symbol using the font awesome instructions. I’m sure I’ve done this in the past and it worked fine but there must be something wrong/missing in the instructions.

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

ESP32-S3 with Arduino

What LVGL version are you using?

8.4

What do you want to achieve?

Show a symbol instead of a square box

What have you tried so far?

Following the guide here:
https://docs.lvgl.io/8.4/overview/font.html#add-new-symbols

Code to reproduce

extern lv_font_t Icon_Bed;

or

LV_FONT_DECLARE(Icon_Bed);

//Bed Classic Solid Icon | Font Awesome
#define FA_ICON_BED “\xEF\x88\xB6” //based off the conversion of f236

    //Create background button for light on off icon
    lv_obj_t * btn_bed_light = lv_btn_create(ui_Home_Screen);
    lv_obj_align(btn_bed_light, LV_ALIGN_TOP_RIGHT, -40, 0);
    lv_obj_set_height(btn_bed_light, 70);
    lv_obj_set_width(btn_bed_light, 80);
    lv_obj_set_style_bg_opa(btn_bed_light, LV_OPA_TRANSP, LV_PART_MAIN);

    //Create light switch indicator icon
    lbl_bedLight_Icon = lv_label_create(ui_Home_Screen);
    lv_obj_set_style_text_color(lbl_bedLight_Icon, lv_color_hex(LV_COLOUR_LIGHT_OFF), LV_PART_MAIN);
    lv_label_set_text(lbl_bedLight_Icon, FA_ICON_BED);
    lv_obj_set_style_text_font(lbl_bedLight_Icon, &Icon_Bed, LV_PART_MAIN| LV_STATE_DEFAULT);

    lv_obj_align_to(lbl_bedLight_Icon, btn_bed_light, LV_ALIGN_TOP_LEFT, -5, -5);

Screenshot and/or video

Just a rectangle in the top right.

Icon c file:
Icon_Bed.c (12.7 KB)

Screenshot of conversion settings:

image
image923×861 57.4 KB

URL of font converter:

Any help would be really appreciated!

2

you should use 0xf236 in Range field instead of Symbols. In symbols field you need to list symbols needs to include in font-file, for example - AaBbCc … etc

3

Oh my! What a school boy error.

I read through that multiple times and completely missed I needed to put the symbol in the range field not the symbols field. Kinda counter intuitive but hey, this is where we are.

Thanks for the help, it worked perfectly!

4

How did you get custom fonts to work on Arduino for the ESP32-S3. i’m using the S3 LCD 7 Inch that uses LVGL v8.4 and cannot figure out how to put custom fonts in my code, i downloaded from google fonts, then converted through LVGL Converter into a .C file, C file moved into the project folder. turned 0s into 1s in lv_conf. Duplicated .C file as .H file, so now there is a .C and .H file in the project folder. #include “font.h” and still it pops up with an error message saying

Compilation error: ‘lv_font_t’ {aka ‘const struct _lv_font_t’} has no member named ‘static_bitmap’

5

font size is 72