Minimal documentation about how to use icon fonts #42

kraptor · 2020-03-29T11:08:02Z

kraptor
Mar 29, 2020

Here it is some documentation about how to use icon fonts, as it took me a while to make it work: default values while initializing ImFontConfig struct are not expected, so we have to initialize the struct fully. You may add this to documentation or examples if you wish 😄

proc new_ImFontConfig(): ImFontConfig =
    #[Custom constructor with default params taken from imgui.h]#
    result.fontDataOwnedByAtlas = true
    result.fontNo = 0
    result.oversampleH = 3
    result.oversampleV = 1
    result.pixelSnapH = true
    result.glyphMaxAdvanceX = float.high
    result.rasterizerMultiply = 1.0
    result.mergeMode = false

During initialization, load the font alongside the default one (or after any other font you already loaded):

    var io = igGetIO()
    io.fonts.addFontDefault()

    var config = new_ImFontConfig()
    config.mergeMode = true

    # ranges array should be global (we need to keep it alive during the application lifetime)
    # because 'addFontFromFileTTF' does not copy its values, and it needs a pointer
    let ranges {.global.} = [0xf000'u16,  0xf2e0, 0]

    # do not use FontAwesome 5, as it cannot be loaded (imgui crashes). Here we load version 4
    io.fonts.addFontFromFileTTF("fontawesome-webfont.ttf", size, config.addr, ranges_fa[0].unsafeAddr)

Finally, pass strings using proper unicode characters to buttons, windows, etc. using an unicode literal:

if igBegin("\uf002 <- this is the search icon", ...):
        (...)
    igEnd()

You can check the reference to know what icon corresponds to what character here: https://raw.githubusercontent.com/FortAwesome/Font-Awesome/fa-4/src/icons.yml

See a reference of unicode characters and its corresponding icons for various icon fonts in the following repo: https://github.com/juliettef/IconFontCppHeaders

Cheers!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Minimal documentation about how to use icon fonts #42

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Minimal documentation about how to use icon fonts #42

Uh oh!

Uh oh!

kraptor Mar 29, 2020

Replies: 0 comments

kraptor
Mar 29, 2020