Align icons glyphs or Align text

[madeso]

Version/Branch of Dear ImGui:

About 1 week old master (948009a)

Back-end file/Renderer/OS:

Slightly modified imgui_impl_sdl_gl3.h (changed imgui and opengl include paths)

My Issue/Question:

I want to align the texts/center the icons in this popup:

if(ImGui::BeginPopup("Example Bug"))
{
  // defined somewhere else
  // static bool enabled1 = true;
  // static bool enabled2 = true;
  const char* text1    = ICON_FK_ARROWS_H " New Horizontal divider";
  const char* text2    = ICON_FK_ARROWS_V " New Vertical divider";

  if(enabled1) ImGui::Selectable(text1);
  else ImGui::Text(text1);

  if(enabled2) ImGui::Selectable(text2);
  else ImGui::Text(text2);
  ImGui::EndPopup();
}

The current workaround is to add spaces before and after the icon, to align the text, so one possible, but hacky solution would be to add a min_glyph_width to the ImFontConfig struct when loading the font.

[ocornut]

At the user level, you may split your text rendering in two steps:

ImGui::Text(icon)
ImGui::SameLine(position)
ImGui::Text(description)

Or:

one possible, but hacky solution would be to add a min_glyph_width to the ImFontConfig struct when loading the font.

I agree, been meaning to add an option like that for merging icon fonts as it is a common problem. Will probably add this feature soon. To not add additional absolute size into ImFontConfig, I wonder if this option should be specified as a ratio of the font height? Maybe a little weird..

[ocornut]

I pushed a branch font_min_max_advance with the feature, if you'd like to test it.
There are both Min and Max settings, allowing to force a font to be monospaced.
When the AdvanceX value for a given glyph is adjusted, the code offset the glyphs by half that amount to recenter it. This is possibly subject to tweaks or additional options (feedback welcome).

ImGui::Text(ICON_FA_ARROWS_H " New Horizontal divider");
ImGui::Text(ICON_FA_ARROWS_V " New Vertical divider");

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

    ImFontConfig cfg;
    cfg.MergeMode = true;
    cfg.GlyphMinAdvanceX = 14.0f;
    static const ImWchar icon_ranges[] = { ICON_MIN_FA, ICON_MAX_FA, 0 };
    io.Fonts->AddFontFromFileTTF("../../../imgui-wip/fonts/fontawesome-webfont.ttf", 14.0f, &cfg, icon_ranges);
}

[madeso]

I saw it, the diff looks awesome, added a calender reminder, will try it when I get back from work in about 5-6 hours.

Not sure about the SameLine() solution though, as that will create 2 seperate widgets, and hence decrease the active region of the selectable, right?

[ocornut]

Selectable by default uses the entire available width for hit testing:

ImGui::Selectable("Hello");
ImGui::SameLine();
ImGui::Text("Blah");

[codecat]

This works great! 🎉

[madeso]

I couldn't get SameLine() solution lines to sync up, but the min_max_advance branch works perfectly.

[codecat]

To be clear, that's what I'm using in my screenshots as well, the minimum advance glyph branch.

[codecat]

Will this be merged soon? Seems like a small enough feature to merge?

[dougbinks]

I've just tried this branch and it works extremely well for us. We no longer need to add tabs or manually position content. Many thanks!

[ocornut]

Merged. Thanks @madeso @codecat @dougbinks for the confirmation!

[vikram-lodhi]

static const ImWchar icons_ranges[] = {ICON_MIN_FA, ICON_MAX_16_FA, 0};
void AddFonts() {
    ImGuiIO &io = ImGui::GetIO();
    io.Fonts->AddFontDefault();
    ImFontConfig icons_config;
    icons_config.MergeMode = true;
    icons_config.PixelSnapH = true;
    icons_config.GlyphMinAdvanceX = 16.0f;

    io.Fonts->AddFontFromFileTTF(FONT_ICON_FILE_NAME_FAS, 16.0f, &icons_config, icons_ranges);
}

Font File from https://github.com/FortAwesome/Font-Awesome/blob/5.x/webfonts/fa-solid-900.ttf

I am using latest push of Docking branch

IconFontCppHeaders
I am using given API to load Icon

if (ImGui::Button(ICON_FA_MINUS_SQUARE " Remove Parameter")) { }
ImGui::SameLine();
if (ImGui::Button(ICON_FA_SAVE " Save Config")) {}

How can i align icon?

[dougbinks]

Hi @vikram-lodhi,

We have found that font awesome fonts need to have their sizes reduced by 2.0f/3.0f in order to align correctly.

The default font (which it looks like you are using) has a fontsize of 13.0f. So something like this might work well for you:

baseFontSize = 13.0f;
icons_config.GlyphMinAdvanceX = baseFontSize * 2.0f/3.0f;
io.Fonts->AddFontFromFileTTF(FONT_ICON_FILE_NAME_FAS,  baseFontSize * 2.0f/3.0f, &icons_config, icons_ranges);

I should update the readme at https://github.com/juliettef/IconFontCppHeaders to mention this.

[juliettef]

FYI updated the IconFontCppHeaders readme example code.

[ron3545]

So I' currently using the latest version of the docking branch.

I'm trying to add icon on a button, but the problem is that the icon and the text are not aligned together. Additionally, is it possible to have the same font size for both the icon and the text?
here is what I've got:

ImGui::CreateContext();
ImGuiIO& io = ImGui::GetIO(); 
io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;     // Enable Keyboard Controls
io.ConfigFlags |= ImGuiConfigFlags_DockingEnable;         // Enable Docking
io.ConfigFlags |= ImGuiConfigFlags_ViewportsEnable;       // Enable Multi-Viewport / Platform Windows
io.IniFilename = NULL;
//io.DisplaySize = ImVec2(1280, 720) / io.DisplayFramebufferScale;
io.Fonts->AddFontDefault();

float iconFontSize = 18 * 4.0f / 3.0f; 
static const ImWchar icons_ranges_CI[] = { ICON_MIN_CI, ICON_MAX_CI, 0 };
static const ImWchar icons_ranges_MDI[] = { ICON_MIN_MDI, ICON_MAX_MDI, 0 };

ImFontConfig icons_config; 
icons_config.MergeMode = true; 
icons_config.GlyphMinAdvanceX = iconFontSize;

ICFont = io.Fonts->AddFontFromFileTTF( FONT_ICON_FILE_NAME_CI, iconFontSize, &icons_config, icons_ranges_CI );
IMDIFont = io.Fonts->AddFontFromFileTTF( FONT_ICON_FILE_NAME_MDI, iconFontSize, &icons_config, icons_ranges_MDI); 

const char* button_names[] = {ICON_CI_NEW_FILE " New File...", ICON_CI_ADD " Open File...",  "Open Folder...",  "Clone Git Repository..."};


// in imgui window somewhere
ImGui::PushFont(ICFont);
      if(ImGui::Button(button_names[i]))
      {
          
      }
ImGui::PopFont();

Font file from https://github.com/microsoft/vscode-codicons/blob/main/dist/codicon.ttf

[ocornut]

You are loading your icons font with size 24 (18 * 4 / 3) whereas AddFontDefault() by default load a font of size 13.
You'll need to have the size to roughly match.

You don't need to use PushFont() if the fonts are merged together.

[ron3545]

How can the discrepancy in font sizes, specifically loading the icons font with a size of 24 (calculated as 18 * 4 / 3), while the default font loaded by AddFontDefault() is of size 13, be addressed to ensure that the sizes roughly match? Additionally, I've attempted to remove AddFontDefault(), but encountered an error when trying to use MergeMode from ImFontConfig. How can this issue be resolved while maintaining compatibility with MergeMode?

[ocornut]

be addressed to ensure that the sizes roughly match

Load the icon font with a size of 13 or the default font with a size of 24...

Additionally, I've attempted to remove AddFontDefault(), but encountered an error when trying to use MergeMode from ImFontConfig. How can this issue be resolved while maintaining compatibility with MergeMode?

You can pass a ImFontConfig value to AddFont:

ImFontConfig cfg;
cfg.SizePixels = 24.0f;
ImGui::AddFontDefault(&cfg);