Icon fonts and library not rendering at all.

[AhmedElghamriny]

Hi everyone,

I’m currently integrating Font Awesome with Dear ImGui, but I’m running into an issue where the icons are displayed as question marks (?), and in the Metrics/Debugger window the only font shown is ProggyClean.ttf.

#define FONT_ICON_FILE_NAME_FAR "fonts/fa-regular-400.ttf"
#define FONT_ICON_FILE_NAME_FAS "fonts/fa-solid-900.ttf"
#define FONT_ICON_FILE_NAME_FWEB "fonts/fontawesome-webfont.ttf"
#define FONT_ICON_FILE_NAME_FKWEB "fonts/forkawesome-webfont.ttf"

I found an earlier thread describing a similar issue and followed the suggested steps. I also tried using a different .ttf file for Font Awesome, but I’m still getting the same result.

My font loading code:

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

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

ImFont* iconFont = io.Fonts->AddFontFromFileTTF(FONT_ICON_FILE_NAME_FAS, 16.0f, &icons_config, icons_ranges);

if (iconFont == nullptr) {
    std::cerr << "ERROR: Failed to load Font Awesome" << std::endl;
}
else {
    std::cout << "SUCCESS: Font Awesome loaded!" << std::endl;
}

io.Fonts->Build();

auto initFlag = ImGui::SFML::Init(window);
auto updateFontTextureFlag = ImGui::SFML::UpdateFontTexture();

[ocornut]

(1) Which version of imgui are you using and which backend? Does the backend supports ImGuiBackendFlags_HasTextures ?
(2) See Troubleshooting https://github.com/ocornut/imgui/blob/master/docs/FONTS.md#troubleshooting

[AhmedElghamriny]

Hi @ocornut,

Thank you for the quick reply.

(1) Which version of imgui are you using and which backend? Does the backend supports ImGuiBackendFlags_HasTextures ?

I'm using v1.92.7 with SFML backend and yes it does support ImGuiBackendFlags_HasTextures.

(2) See Troubleshooting https://github.com/ocornut/imgui/blob/master/docs/FONTS.md#troubleshooting

Yes, I've been looking at the troubleshooting guide for some time now, and I think I pinpointed the problem. The issue is the encoding utf-8 portion. Using the guide I added the following code:

ImGui::SeparatorText("CORRECT");
ImGui::DebugTextEncoding((const char*)u8"こんにちは");

ImGui::SeparatorText("INCORRECT");
ImGui::DebugTextEncoding("こんにちは");

Both versions here don't show the correct characters.

I even added:

#pragma execution_character_set("utf-8")

at the top of my file and its still not working.

[ocornut]

It seems like a compiler configuration issue, and yes, showing the encoding is a way to validate that it is passing correct UTF-8.

[AhmedElghamriny]

I tried everything in the guide and managed to get to little square boxes after dynamically pushing and popping the font instead of question marks.

I also tried loading a tight range for 1 icon to test out and it still doesn't work. Is SFML as supported backend? I know its not listed as an official/standard backend for Dear ImGui but I read online it should work....

IMGUI_CHECKVERSION();
ImGui::CreateContext();
ImGuiIO& io = ImGui::GetIO(); (void)io;
io.Fonts->AddFontDefault();
io.Fonts->Flags |= ImFontAtlasFlags_NoPowerOfTwoHeight;

static const ImWchar ranges[] = {
    0xE58E, 0xE58E, // Male icon code
    0
};

ImFontConfig ms_config;
ms_config.OversampleH = 1;
ms_config.OversampleV = 1;
ms_config.PixelSnapH = true;
ms_config.MergeMode = true;
ImFont* msFont = io.Fonts->AddFontFromFileTTF(FONT_ICON_FILE_NAME_MD, 24.0f, &ms_config, ranges);

if (!msFont) {
    std::cerr << "ERROR: Material Symbols font failed to load!" << std::endl;
}
else {
    std::cout << "Material Symbols loaded!" << std::endl;
}

io.Fonts->Build();
ImGui::SFML::Init(window);

[AhmedElghamriny]

Also small update.

I switched my backend from SFML to GLFW and everything works now straight out the box no troubleshooting or configuration changes. I guess SFML is not supported.