Icon Font not rendering correctly

[Trider12]

Version/Branch of Dear ImGui:

Version: Dear ImGui 1.88 WIP (18718)
Branch: master

Back-end/Renderer/Compiler/OS

Back-ends: imgui_impl_sdl.cpp + imgui_impl_opengl3.cpp
Compiler: MSVC | Clang 10.0.0
Operating System: Windows 10 | Ubuntu 20.04.4

My Issue/Question:

I'm using IconsFontAwesome5.h from IconFontCppHeaders and fa-regular-400.ttf.

Screenshots/Video

Standalone, minimal, complete and verifiable example:

ImGuiIO &io = ImGui::GetIO();
io.Fonts->AddFontDefault();

static const ImWchar icons_ranges[] = {ICON_MIN_FA, ICON_MAX_FA, 0};
ImFontConfig icons_config;
icons_config.MergeMode = true;
icons_config.PixelSnapH = true;

//assert(std::filesystem::exists("assets/fonts/fa-regular-400.ttf"));
io.Fonts->AddFontFromFileTTF("assets/fonts/fa-regular-400.ttf", 16.f, &icons_config, icons_ranges);

ImGui::SetNextWindowSize({400, 200});
ImGui::Begin("TestWindow");

ImGui::Text(ICON_FA_PAINT_BRUSH " Paint");
ImGui::Button(ICON_FA_SEARCH " Search");

ImGui::End();

[Trider12]

Using Metrics/Debugger I can see that the font does indeed have renderable glyphs:

[Trider12]

So, of course, the issue happened to be with the font itself. The IconFontCppHeaders example used fa-solid-900.ttf and ImGui example used fontawesome-webfont.ttf while I tried to use fa-regular-400.ttf.

The confusion came from these lines in the IconFontCppHeaders example, that do not mention the reduced glyph set of the regular version and then explicitly use the ICON_FA_PAINT_BRUSH character which it lacks:

io.Fonts->AddFontFromFileTTF( FONT_ICON_FILE_NAME_FAS, 16.0f, &icons_config, icons_ranges );
// use FONT_ICON_FILE_NAME_FAR if you want regular instead of solid

// in an imgui window somewhere...
ImGui::Text( ICON_FA_PAINT_BRUSH "  Paint" );    // use string literal concatenation

Switching to fontawesome-webfont.ttf or forkawesome-webfont.ttf fixed the issue:

[ocornut]

We now have variety of tools to help people debug their issue.

1. Call ImGui::DebugTextEncoding(ICON_FA_PAINT_BRUSH); to see with codepoints are sent in your text.
2. Browse Metrics->Fonts to confirm which glyphs are loaded.

[svkvarun43]

Thanks for the reply,

I am unfortunately bound by the imgui version in this fork https://github.com/benui-dev/UnrealImGui which doesn't have DebugTextEncoding as im using it as a plugin for Unreal Engine 5.0. Is there any other way to diagnose the issue please?

[Trider12]

@svkvarun43, you are using the wrong header file:

• IconsFontAwesome5.h is from the version 5.x
• fontawesome-webfont.ttf is from the version 4.x
• forkawesome-webfont.ttf is from the fork version

You need to use an appropriate header for each .ttf.

[svkvarun43]

@Trider12

Thanks for the reply

So I replaced the header now to #include "IconsFontAwesome4.h" with fontawesome-webfont.ttf, didn't work

and also tried with #include IconFontAwesome6.h with its fa-solid-900.ttf.

But I still end up with a ? for any icon i try to load :(

[Trider12]

@svkvarun43, as @ocornut have stated above, use the Metrics window to inspect the glyphs.

[ocornut]

You can update the copy of dear imgui in that repo.