Last active
April 16, 2024 14:29
-
-
Save canxerian/eb59bd175077757365ae191c29ded401 to your computer and use it in GitHub Desktop.
How to use glyph icons with TextMeshPro
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This guide shows how you can you use icon fonts in TextMeshPro | |
1. Copy the font file (.ttf) and copy it a location inside your Unity assets folder. I found my font file here: C:\Windows\Fonts\SegoeIcons.ttf | |
2. In Unity, navigate to: | |
Window > TextMeshPro > Font Asset Creator | |
Select the font file you just copied to your project in "Source Font File" | |
3. Find the Unicode representation of your icon, these can be found on this website, for example: https://docs.microsoft.com/en-us/windows/apps/design/style/segoe-ui-symbol-font | |
Enter this Unicode to in to the text area labelled "Character Sequence (Hex). | |
Use commas for multiple Unicodes, e.g: E7E8,E711 | |
Click "Generate Font Asset". Save this asset | |
4. Now use your icon in your scene: | |
Create an instance of a TextMeshPro text component | |
Select the font created in step 3. | |
In the text area, enter \uE710, (replace E710 with whichever icon you wish to use) | |
Now enjoy crisp icons that scale to whatever size, using the power of TextMeshPro's signed distance fields! | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment