Font: Readme about icons

This commit is contained in:
ocornut 2016-11-06 22:53:36 +01:00
parent da9feba539
commit 3689efb726
3 changed files with 29 additions and 8 deletions

View File

@ -103,6 +103,7 @@ The library started its life and is best known as "ImGui" only due to the fact t
<br><b>How can I have multiple widgets with the same label? Can I have widget without a label? (Yes). A primer on the purpose of labels/IDs.</b> <br><b>How can I have multiple widgets with the same label? Can I have widget without a label? (Yes). A primer on the purpose of labels/IDs.</b>
<br><b>How can I tell when ImGui wants my mouse/keyboard inputs and when I can pass them to my application?</b> <br><b>How can I tell when ImGui wants my mouse/keyboard inputs and when I can pass them to my application?</b>
<br><b>How can I load a different font than the default?</b> <br><b>How can I load a different font than the default?</b>
<br><b>How can I easily use icons in my application?</b>
<br><b>How can I load multiple fonts?</b> <br><b>How can I load multiple fonts?</b>
<br><b>How can I display and input non-latin characters such as Chinese, Japanese, Korean, Cyrillic?</b> <br><b>How can I display and input non-latin characters such as Chinese, Japanese, Korean, Cyrillic?</b>
<br><b>How can I use the drawing facilities without an ImGui window? (using ImDrawList API)</b> <br><b>How can I use the drawing facilities without an ImGui window? (using ImDrawList API)</b>

View File

@ -4,12 +4,27 @@
Fonts are rasterized in a single texture at the time of calling either of io.Fonts.GetTexDataAsAlpha8()/GetTexDataAsRGBA32()/Build(). Fonts are rasterized in a single texture at the time of calling either of io.Fonts.GetTexDataAsAlpha8()/GetTexDataAsRGBA32()/Build().
If you want to use icons in ImGui, a good idea is to merge an icon font within your main font, and refer to icons directly in your strings. ---------------------------------
You can use headers files with definitions for popular icon fonts codepoints, by Juliette Foucaut, at https://github.com/juliettef/IconFontCppHeaders USING ICONS
---------------------------------
Using an icon font (such as FontAwesome: http://fontawesome.io) is an easy and practical way to use icons in your ImGui application.
A common pattern is to merge the icon font within your main font, so you can refer to the icons directly from your strings without having to change fonts back and forth.
To refer to the icon from your C++ code, you can use headers files created by Juliette Foucaut, at https://github.com/juliettef/IconFontCppHeaders
// Merge icons into default tool font
#include "IconsFontAwesome.h"
ImGuiIO& io = ImGui::GetIO();
io.Fonts->AddFontDefault();
ImFontConfig config;
config.MergeMode = true;
const ImWchar icon_ranges[] = { ICON_MIN_FA, ICON_MAX_FA, 0 };
io.Fonts->AddFontFromFileTTF("fonts/fontawesome-webfont.ttf", 13.0f, &config, icon_ranges);
// Usage, e.g.
ImGui::Text("%s Search", ICON_FA_SEARCH);
--------------------------------- ---------------------------------
LOADING INSTRUCTIONS FONTS LOADING INSTRUCTIONS
--------------------------------- ---------------------------------
Load default font with: Load default font with:
@ -69,7 +84,7 @@
--------------------------------- ---------------------------------
REMAP CODEPOINTS REMAPPING CODEPOINTS
--------------------------------- ---------------------------------
All your strings needs to use UTF-8 encoding. Specifying literal in your source code using a local code page (such as CP-923 for Japanese CP-1251 for Cyrillic) will not work. All your strings needs to use UTF-8 encoding. Specifying literal in your source code using a local code page (such as CP-923 for Japanese CP-1251 for Cyrillic) will not work.
@ -78,7 +93,7 @@
--------------------------------- ---------------------------------
EMBED A FONT IN SOURCE CODE EMBEDDING FONT IN SOURCE CODE
--------------------------------- ---------------------------------
Compile and use 'binary_to_compressed_c.cpp' to create a compressed C style array. Then load the font with: Compile and use 'binary_to_compressed_c.cpp' to create a compressed C style array. Then load the font with:

View File

@ -25,6 +25,7 @@
- How can I have multiple widgets with the same label? Can I have widget without a label? (Yes). A primer on the purpose of labels/IDs. - How can I have multiple widgets with the same label? Can I have widget without a label? (Yes). A primer on the purpose of labels/IDs.
- How can I tell when ImGui wants my mouse/keyboard inputs and when I can pass them to my application? - How can I tell when ImGui wants my mouse/keyboard inputs and when I can pass them to my application?
- How can I load a different font than the default? - How can I load a different font than the default?
- How can I easily use icons in my application?
- How can I load multiple fonts? - How can I load multiple fonts?
- How can I display and input non-latin characters such as Chinese, Japanese, Korean, Cyrillic? - How can I display and input non-latin characters such as Chinese, Japanese, Korean, Cyrillic?
- How can I use the drawing facilities without an ImGui window? (using ImDrawList API) - How can I use the drawing facilities without an ImGui window? (using ImDrawList API)
@ -406,6 +407,10 @@
io.Fonts->AddFontFromFileTTF("myfontfile.ttf", size_in_pixels); io.Fonts->AddFontFromFileTTF("myfontfile.ttf", size_in_pixels);
io.Fonts->GetTexDataAsRGBA32() or GetTexDataAsAlpha8() io.Fonts->GetTexDataAsRGBA32() or GetTexDataAsAlpha8()
Q: How can I easily use icons in my application?
A: The most convenient and practical way is to merge an icon font such as FontAwesome inside you main font. Then you can refer to icons within your strings.
Read 'How can I load multiple fonts?' and the file 'extra_fonts/README.txt' for instructions.
Q: How can I load multiple fonts? Q: How can I load multiple fonts?
A: Use the font atlas to pack them into a single texture: A: Use the font atlas to pack them into a single texture:
(Read extra_fonts/README.txt and the code in ImFontAtlas for more details.) (Read extra_fonts/README.txt and the code in ImFontAtlas for more details.)
@ -425,13 +430,13 @@
config.GlyphExtraSpacing.x = 1.0f; config.GlyphExtraSpacing.x = 1.0f;
io.Fonts->LoadFromFileTTF("myfontfile.ttf", size_pixels, &config); io.Fonts->LoadFromFileTTF("myfontfile.ttf", size_pixels, &config);
// Combine multiple fonts into one // Combine multiple fonts into one (e.g. for icon fonts)
ImWchar ranges[] = { 0xf000, 0xf3ff, 0 }; ImWchar ranges[] = { 0xf000, 0xf3ff, 0 };
ImFontConfig config; ImFontConfig config;
config.MergeMode = true; config.MergeMode = true;
io.Fonts->AddFontDefault(); io.Fonts->AddFontDefault();
io.Fonts->LoadFromFileTTF("fontawesome-webfont.ttf", 16.0f, &config, ranges); io.Fonts->LoadFromFileTTF("fontawesome-webfont.ttf", 16.0f, &config, ranges); // Merge icon font
io.Fonts->LoadFromFileTTF("myfontfile.ttf", size_pixels, NULL, &config, io.Fonts->GetGlyphRangesJapanese()); io.Fonts->LoadFromFileTTF("myfontfile.ttf", size_pixels, NULL, &config, io.Fonts->GetGlyphRangesJapanese()); // Merge japanese glyphs
Q: How can I display and input non-Latin characters such as Chinese, Japanese, Korean, Cyrillic? Q: How can I display and input non-Latin characters such as Chinese, Japanese, Korean, Cyrillic?
A: When loading a font, pass custom Unicode ranges to specify the glyphs to load. A: When loading a font, pass custom Unicode ranges to specify the glyphs to load.