Using Icon Fonts in ImGui?

[seltzdesign]

I have been using ImGui extensively and building a library of UI elements based on the standard widgets.

I am using custom fonts successfully and now want to use an icon font like Fontawesome as well. It is definitely possible in ImGui, but I can’t make it work in vvvv yet.

Here are the instructions: imgui/docs/FONTS.md at master · ocornut/imgui · GitHub

The 2 things I think are not working yet is

a) specifying a custom glyph range. There is a set range of glyph ranges and as far as I can tell we cannot specify our own:

we need to set the glyph range to between ICON_MIN_FA and ICON_MAX_FA

b) we need to pass string literals to ImGui, but the IOBox always turns it into a string.

edit: ah, I see, these are defined in the header files from here: GitHub - juliettef/IconFontCppHeaders: C and C++ headers, C# and Python classes, Rust files and Go package for icon fonts Font Awesome, Fork Awesome, Google Material Design icons and symbols, Pictogrammers Material Design icons, Kenney game icons, Fontaudio, Codicons and Lucide.

Is it feasible to make it work in vvvv?

[seltzdesign]

It might also be nice to use this icon font from Microsoft: Segoe Fluent Icons font - Windows apps | Microsoft Learn

[seltzdesign]

I have followed up with SVG icons for the time being and it works quite well by creating some custom widgets:

But I think it’s a bit overkill and an icon font would be much more lightweight.

[sebescudie]

I agree that’d be great, I often refrain from creating button with icons because there’s no easy way to do so as of now!

[seltzdesign]

@sebescudie

I often refrain from creating button with icons because there’s no easy way to do so as of now!

I will probably share my high-level library of custom ImGui elements at some point. They each just have all the options you might need when designing UI’s. Now my CustomButton has options for .svg icons and placement of the icon and label. Nothing magic happening, just takes a while to work out how to calculate stuff and a bunch of resetting cursor position and such.

ImGui is cool, but if you want good UX in your UI, it’s a bit of work. Since good UX is good for everyone I am thinking about creating a library with all my custom elements.

[yar]

@seltzdesign

I will probably share my high-level library of custom ImGui elements at some point

@seltzdesign can you test and include Drag’nDrop, please?

ImGUI drag'n'drop

While trying to create a mechanic, I decided to try to do it via Drag’n’Drop. And was surprised to find that in the original ImGUI it exists by default, but in Gamma there are only DragDropFlags. Am I missing something or has it just not been imported? Is this theoretically possible or is there some difficulty that prevents it from being imported? ▶ Demo Code

[seltzdesign]

@yar

can you test and include Drag’nDrop, please?

I am not doing anything with drag and drop, so I doubt I will look into that. It’s a whole complicated topic that I don’t really want to get into. This will just be a library of Widgets, which are built so they have good UX.

[robotanton]

Hello,

thanks to @Elias there is now a Custom Glyph Range pin available in the FontConfig node.
See the HowTo Use Icon Fonts helppatch.

Available in previews >= 7.0-0233

Hurray!

Anton