Image fonts? Fontawesome?

Is it possible to use an image font like Fontawesome? I'd love to have access to all those icons. I'm using them in my current UI via CoherentUI, but am changing my UI to built in 4.6 UI as it's more reliable and will want to keep my icon usage.

 

Has no one tried this yet? I imported the font, but doesn't appear functional.

 

I tried setting the font to Unicode and tried using the character code ( e.g.  ), but it does nothing. Has anyone got custom fonts like this working?

 

Ok, the only way I could get it to work was to go to the fontawesome site, use the unicode cheatsheat, view the HTML source, copy the icon source, and paste it into the text field. This seams bonkers. Why won't the unicodes work? The documentation says unicode is supported. What gives?

 

Ok I've tried all the following unicode usages and none of them work.

Code (text):

1.  \f042 \uf042 \Uf042

I had to write a small script that on display parses it into the character. Is there no way to just use Unicode strings in the UI? If not how can I make a script extend the existing Text UI element with this capability? I looked into the reference documentation and looks like it's using Graphics to draw it? Could a simple example be provided please.

 

Ok, Looks like there is no support for unicode even though documentation says there is. I've wrote the below tiny script that extends the Text type.

Code (CSharp):

1.  
2. using System;
3. using System.Collections.Generic;
4. using System.Text.RegularExpressions;
5. using System.Globalization;
6.  
7. namespace UnityEngine.UI
8. {
9.     public class TextUnicode : Text
10.     {
11.         private Regex regexp = new Regex( @"\\u(?<Value>[a-zA-Z0-9]{4})" );
12.  
13.         protected override void OnFillVBO( List<UIVertex> vbo )
14.         {
15.             if ( this.font == null ) {
16.                 return;
17.             }
18.  
19.             // Found no way to set this from here:
20.             //this.m_DisableFontTextureChangedCallback = true;
21.  
22.             Vector2 size = base.rectTransform.rect.size;
23.  
24.             TextGenerationSettings generationSettings = this.GetGenerationSettings( size );
25.  
26.             this.cachedTextGenerator.Populate( this.Decode( this.text ), generationSettings );
27.  
28.             Rect rect = base.rectTransform.rect;
29.  
30.             Vector2 textAnchorPivot = Text.GetTextAnchorPivot( this.alignment );
31.  
32.             Vector2 zero = Vector2.zero;
33.  
34.             zero.x = ( ( textAnchorPivot.x != 1f ) ? rect.xMin : rect.xMax );
35.             zero.y = ( ( textAnchorPivot.y != 0f ) ? rect.yMax : rect.yMin );
36.  
37.             Vector2 vector = base.PixelAdjustPoint( zero ) - zero;
38.  
39.             IList<UIVertex> verts = this.cachedTextGenerator.verts;
40.  
41.             float num = 1f / this.pixelsPerUnit;
42.  
43.             if ( vector != Vector2.zero ) {
44.                 for ( int i = 0; i < verts.Count; i++ )
45.                 {
46.                     UIVertex item = verts[i];
47.                     item.position *= num;
48.                     item.position.x = item.position.x + vector.x;
49.                     item.position.y = item.position.y + vector.y;
50.                     vbo.Add( item );
51.                 }
52.             } else {
53.                 for ( int j = 0; j < verts.Count; j++ )
54.                 {
55.                     UIVertex item2 = verts[j];
56.                     item2.position *= num;
57.                     vbo.Add( item2 );
58.                 }
59.             }
60.  
61.             // Found no way to set this from here:
62.             //this.m_DisableFontTextureChangedCallback = false;
63.         }
64.  
65.         private string Decode( string value )
66.         {
67.             return regexp.Replace( value, m => ( (char) int.Parse( m.Groups["Value"].Value, NumberStyles.HexNumber ) ).ToString() );
68.         }
69.     }
70. }
71.  

You'd use Text Unicode instead of Text, which will parse the following Unicode usage out to its respective character.

\uf042

Be greatful to have some feedback from Unity to make this easier or at least please implement unicode parsing into next release. I'm not keen on the idea of having to replace all of that usage. It'd make more sense if I could just populate the TextGenerator with my parsed string instead of having to replace that entire output function.

 

Would it be possible for me to modify the text, call the parent OnFillVBO, then restore the text back? Would this work to avoid having to clone all this code? Could someone from Unity please chime in.. how is unicode not working not a bigger deal...

 

Ok, I tried to make it more simple and came up with the following.

Code (CSharp):

1. using System;
2. using System.Collections.Generic;
3. using System.Text.RegularExpressions;
4. using System.Globalization;
5.  
6. namespace UnityEngine.UI
7. {
8.     public class TextUnicode : Text
9.     {
10.         private Regex regexp = new Regex( @"\\u(?<Value>[a-zA-Z0-9]{4})" );
11.  
12.         protected override void OnFillVBO( List<UIVertex> vbo )
13.         {
14.             string cache = this.text;
15.  
16.             this.text = this.Decode( this.text );
17.  
18.             base.OnFillVBO( vbo );
19.  
20.             this.text = cache;
21.         }
22.  
23.         private string Decode( string value )
24.         {
25.             return regexp.Replace( value, m => ( (char) int.Parse( m.Groups["Value"].Value, NumberStyles.HexNumber ) ).ToString() );
26.         }  
27.     }
28. }
29.  

It works, but the problem is it throws the following to the console.

Code (CSharp):

1. Trying to add Text - Icon (UnityEngine.UI.TextUnicode) for graphic rebuild while we are already inside a graphic rebuild loop. This is not supported.
2. UnityEngine.Canvas:SendWillRenderCanvases()

Any ideas? Is this perhaps a bug?

 

How would I go about doing that?

Awesome, thanks. Will give that a try when I've time (getting busy here for the holidays!).

 

Great, your proposal works. Below is the final script. If anyone wants to use it feel free. It basically just replaces the Text type with Text Unicode type, which will parse C# unicode strings.

Code (CSharp):

1. using System;
2. using System.Collections.Generic;
3. using System.Text.RegularExpressions;
4. using System.Globalization;
5.  
6. namespace UnityEngine.UI
7. {
8.     public class TextUnicode : Text
9.     {
10.         private bool disableDirty = false;
11.         private Regex regexp = new Regex( @"\\u(?<Value>[a-zA-Z0-9]{4})" );
12.  
13.         protected override void OnFillVBO( List<UIVertex> vbo )
14.         {
15.             string cache = this.text;
16.  
17.             disableDirty = true;
18.  
19.             this.text = this.Decode( this.text );
20.  
21.             base.OnFillVBO( vbo );
22.  
23.             this.text = cache;
24.  
25.             disableDirty = false;
26.         }
27.  
28.         private string Decode( string value )
29.         {
30.             return regexp.Replace( value, m => ( (char) int.Parse( m.Groups["Value"].Value, NumberStyles.HexNumber ) ).ToString() );
31.         }  
32.  
33.         public override void SetLayoutDirty()
34.         {
35.             if ( disableDirty ) {
36.                 return;
37.             }
38.  
39.             base.SetLayoutDirty();
40.         }
41.      
42.         public override void SetVerticesDirty()
43.         {
44.             if ( disableDirty ) {
45.                 return;
46.             }
47.  
48.             base.SetVerticesDirty();
49.         }
50.      
51.         public override void SetMaterialDirty()
52.         {
53.             if ( disableDirty ) {
54.                 return;
55.             }
56.  
57.             base.SetMaterialDirty();
58.         }
59.     }
60. }
61.  

Is it possible support for unicode can be officially implemented? If not could a way to implement this without having to replace Text be added?

 

Yeah, I noticed direct copy and paste worked, but then I could no longer see the character and if I typed something else it'd disappear. I believe that's the issue you mentioned where the inspect font was not the same as the game font, but I think it'd be infinitely better to just add C# unicode or HTML unicode processing to the RichFont feature TBH.

I'll file a report after installing the official 4.6 stable release.

 

Hey there!
Seems like this thread is a little old, but Leo do you have a status update on this?

It would be awesome to be allowed to type unicode directly in the Text field.

 

Great suggestion which I will incorporate in TextMesh Pro

 

I added support for typing Unicode character in the TextMesh Pro Text Input Box. The format is "\u00EF". I could support alternative input formats if necessary.

 

Wanted to provide a more concrete example of this new forthcoming feature.

 

Hehe that's nice! Great addition.
But we also need native support for this in Unity UI

 

At the request of a user, I also added support for UTF-32. You can now create Font Assets using the built-in Font Asset Creator that contain UTF-32 glyphs / icons in the UTF-32 range.

You can now access these UTF-32 characters using the upper case U with 4 hex pairs. Example "\U0001F3A3" as seen in the example below



Note: Since the font that I generated only contained icons, I used the (soon to be released) <font> tag to use a different font for the text and then switched back to font containing these icons using </font>.

P.S. Since you use "\U0001F3A3" in strings as well as in the Text Input Box in TextMesh Pro, I didn't see the need to add support for surrogate pairs given we can access the UTF-32 directly. So now in TextMesh Pro, you can use \u00AE to access UTF-16 and \U0001F3A3 for UTF-32.

 

I recently upgraded to Unity 5.2 (Pro) and it seems as if the original TextUnicode class has broken. The editor complains that line 21 of TextUnicode.cs:

Code (csharp):

1. base.OnFillVBO(vbo);

has been deprecated and OnPopulateMesh() should be used instead. Is there a workaround for this? Or rather....what's the best way to convert a List<UIVertex> vs into a Mesh object?

 

So I think I've come up with a solution to the OnFillVBO deprecation. If you remove that method override in TextUnicode.cs and in its place, replace with:

Code (csharp):

1. protected override void OnPopulateMesh(Mesh toFill) {
2.     string cache = this.text;
3.     disableDirty = true;
4.  
5.      this.text = this.Decode( this.text );
6.      base.OnPopulateMesh(toFill);
7.      this.text = cache;
8.  
9.      disableDirty = false;
10. }

Please review.

 

Jagwire, thank you for posting your fix. You saved me bug fixing it myself today. Cheers!

 

Hum... I upgraded to Unity 5.2.2f1 and TextUnicode is broken. Anyone know the fix? I'm considering switching over to TextMesh Pro.

 

UTF-16 and UTF-32 support is available in the latest release of TextMesh Pro available on the Asset Store. Should you decide to go with TextMesh Pro, be sure to register to the TMP user forum where you'll find additional information about all of this.

As usual, should you require any assistance, feel free to reach out to me at any time.

 

Thanks, Stephan! Count me as a convert. I picked up TextMesh Pro and I'm headed to the forums.

Since this is a Font Awesome thread and others might use TextMesh Pro as a solution now also, I do have a question or two.

What's the best way to use your Font Asset Creator to create a TextMesh Pro font version of Font Awesome. For example, does it matter what version of Font Awesome I start with: otf, ttf, or webfont?

Any advice on atlas size?

 

The .ttf or .otf will work fine.

I would then use the Character Set "Unicode Range (Hex)" to include the icons you want. I am not certain about the exact range but the whole set appears to be located between F000-F500. Depending on how many icons you plan on using, I would play with the atlas size.

Here is an example of the setting used to create a SDF Font Asset of Font Awesome.


Example of text object using two icons and the text input box.


P.S. Once the next major release is out with the Multi Font & Material support which will also include support for fallback fonts, using fonts like FontAwesome will become a lot simpler since you'll be able to mix and match any fonts where one of those can be a set of icons. So should the primary font assigned not contain certain glyphs then the fallbacks would be used in the order they are specified.

 

Thank you very much! I really appreciate the help coming up to speed quickly. I'm days before beta, and making a big UI change wasn't on the plan... I'm already glad that I did though. What a great product!

Also, for others that may find this later, you can get the largest unicode value from css/font-awesome.css. Since all the help lists it by icon name alphabetically, this can be problematic. The current highest value is xf280 as of v4.4.0.

 

Thank you

That is good to know.

 

I had a couple of pretty large projects to convert Text components over to TextMeshProUGUI and wrote an editor script to help. I thought it might be useful to anyone else in the same boat. It only operates on objects in the scene, so your prefabs are safe until you save any changed instances.

There are also a couple helper functions to find Text instances, and to get the font name needed to setup a mapping to the replacement font you want to use in TextMesh Pro. As coded, only fonts using FontAwesome are converted to TestMesh Pro, but that is easy to change.

Also, any targetGraphic references to the Text component are updated to the new TextMesh Pro component. However, I didn't handle the case where Toggle buttons use a Text component for its graphic reference. You will need to add code for that, or just manually update them.

Cheers!

Code (CSharp):

1.  
2. using System.Collections.Generic;
3. using UnityEngine;
4. using UnityEngine.UI;
5. using UnityEditor;
6.  
7. using TMPro;
8.  
9.  
10. class Utils : EditorWindow
11. {
12.     [MenuItem("Utils/Select Text Components")]
13.     public static void SelectText(MenuCommand command)
14.     {
15.         Transform[] ts = FindObjectsOfType<Transform>();
16.         List<GameObject> selection = new List<GameObject>();
17.         foreach(Transform t in ts)
18.         {
19.             Text[] cs = t.gameObject.GetComponents<Text>();
20.             if(cs.Length > 0)
21.             {
22.                 selection.Add(t.gameObject);
23.             }
24.         }
25.         Selection.objects = selection.ToArray();
26.     }
27.  
28.     [MenuItem("Utils/Text -> TextMeshUGUI Transmorph")]
29.     public static void TextMeshTransmorph(MenuCommand command)
30.     {
31.         Text[] texts = FindObjectsOfType<Text>();
32.      
33.         TextMeshProFont fontAwesome = Resources.Load("Fonts/fontawesome-webfont SDF", typeof(TextMeshProFont)) as TextMeshProFont;
34.         if (fontAwesome == null) {
35.             Debug.Log("Not so awesome...");
36.             return;
37.         }
38.         Dictionary<string, TextMeshProFont> fontMap = new Dictionary<string, TextMeshProFont>();
39.         fontMap.Add("FontAwesome", fontAwesome);
40.      
41.         foreach(Text text in texts)
42.         {
43.             Font font = text.font;
44.             if (font.fontNames[0] != "FontAwesome") continue;
45.          
46.             GameObject gameObject = text.gameObject;
47.             Selectable[] selectables = FindObjectsOfType<Selectable>();
48.          
49.             List<Selectable> targetGraphicRefs = new List<Selectable>();
50.             foreach (Selectable selectable in selectables) {
51.                 if (selectable.targetGraphic == text) {
52.                     targetGraphicRefs.Add(selectable);
53.                 }
54.             }          
55.             int fontSize = text.fontSize;
56.             FontStyle fontStyle = text.fontStyle;
57.             HorizontalWrapMode horizWrap = text.horizontalOverflow;
58.             string textValue = text.text;
59.             TextAnchor anchor = text.alignment;
60.             Color color = text.color;
61.             float lineSpacing = text.lineSpacing;
62.          
63.             DestroyImmediate(text);
64.          
65.             TextMeshProUGUI textMesh = gameObject.AddComponent<TextMeshProUGUI>();
66.             if (fontMap.ContainsKey(font.fontNames[0])) {
67.                 textMesh.font = fontMap[font.fontNames[0]];
68.             }          
69.             textMesh.fontSize = fontSize;      
70.             textMesh.fontStyle = FontStyle2TMProFontStyle(fontStyle);
71.             textMesh.enableWordWrapping = (horizWrap == HorizontalWrapMode.Wrap);
72.             textMesh.text = textValue;
73.             textMesh.alignment = TextAnchor2TMProTextAlignmentOptions(anchor);
74.             textMesh.color = color;
75.             textMesh.lineSpacing = lineSpacing;          
76.          
77.             foreach (Selectable selectable in targetGraphicRefs) {
78.                 selectable.targetGraphic = textMesh;  
79.             }      
80.         }
81.     }
82.  
83.     private static TMPro.FontStyles FontStyle2TMProFontStyle(FontStyle style) {
84.         switch (style) {
85.             case FontStyle.Bold:
86.                 return TMPro.FontStyles.Bold;
87.             case FontStyle.Normal:
88.                 return TMPro.FontStyles.Normal;
89.             case FontStyle.Italic:
90.                 return TMPro.FontStyles.Italic;
91.             case FontStyle.BoldAndItalic:
92.                 return TMPro.FontStyles.Italic;    // No choice for Bold & Italic
93.             default:
94.                 return TMPro.FontStyles.Normal;
95.         }
96.     }
97.  
98.     private static TMPro.TextAlignmentOptions TextAnchor2TMProTextAlignmentOptions(TextAnchor anchor)
99.     {
100.         switch (anchor) {
101.             case TextAnchor.LowerCenter:
102.                 return TMPro.TextAlignmentOptions.Bottom;
103.             case TextAnchor.LowerLeft:
104.                 return TMPro.TextAlignmentOptions.BottomLeft;
105.             case TextAnchor.LowerRight:
106.                 return TMPro.TextAlignmentOptions.BottomRight;
107.             case TextAnchor.MiddleCenter:
108.                 return TMPro.TextAlignmentOptions.Center;
109.             case TextAnchor.MiddleLeft:
110.                 return TMPro.TextAlignmentOptions.MidlineLeft;
111.             case TextAnchor.MiddleRight:
112.                 return TMPro.TextAlignmentOptions.MidlineRight;
113.             case TextAnchor.UpperLeft:
114.                 return TMPro.TextAlignmentOptions.TopLeft;
115.             case TextAnchor.UpperCenter:
116.                 return TMPro.TextAlignmentOptions.Top;
117.             case TextAnchor.UpperRight:
118.                 return TMPro.TextAlignmentOptions.TopRight;
119.             default:
120.                 return TMPro.TextAlignmentOptions.Left;
121.         }
122.     }
123.  
124.     [MenuItem("Utils/Log Text Properties")]
125.     public static void LogTextFontProperties(MenuCommand command)
126.     {
127.         TextMeshProFont fontAwesome = Resources.Load("fontawesome-webfont SDF", typeof(TextMeshProFont)) as TextMeshProFont;
128.         if (fontAwesome == null) Debug.Log("Not so awesome...");
129.      
130.         var selected = Selection.activeObject;
131.         if (selected && selected is GameObject) {
132.             Text text = ((GameObject)selected).GetComponent<Text>();
133.             if (text != null) {
134.                 Debug.Log("Font is = "+text.font.fontNames[0]+"\n"+
135.                           "Style is = "+text.fontStyle
136.                 );
137.                 Selectable[] selectables = FindObjectsOfType<Selectable>();
138.                 Debug.Log("Number of Selectables found: "+selectables.Length);
139.              
140.                 foreach (Selectable selectable in Selectable.allSelectables) {
141.                     if (selectable.targetGraphic == text) {
142.                         Debug.Log("Selectable targetGraphic found: "+selectable.name+" ("+selectable.GetType()+")");
143.                     }
144.                 }          
145.             }
146.         }
147.     }
148.  
149.     void OnGUI () {
150.     }
151. }

 

I would suggest you post this information on the TMP User Forum as it will likely prove useful to other users as well. Maybe post this information in the Support section with an appropriate title to make it easy to find.

 

To fix TextUnicode for Unity 5.2.2 just change

Code (CSharp):

1. protected override void OnPopulateMesh(Mesh m)

to

Code (CSharp):

1. protected override void OnPopulateMesh(VertexHelper m)

 

This thread appears to have been a bit hijacked by TextMeshPro @leo.carneiro you mention that the solution posted is 'far from ideal' so I was just wondering if there was a more recent 'more ideal' solution available now (that works crossplatform without having to use TextMeshPro)?

 

Just in case someone was stuck like me.
This is the complete solution to this issue, change the following lines in TextUnicode.cs

Code (CSharp):

1.       protected override void OnFillVBO(List<UIVertex> vbo) {
2.          string cache = this.text;
3.        
4.          disableDirty = true;
5.        
6.          this.text = this.Decode(this.text);
7.        
8.          base.OnFillVBO(vbo);
9.        
10.          this.text = cache;
11.        
12.          disableDirty = false;
13.       }

to be

Code (CSharp):

1. protected override void OnPopulateMesh(Mesh toFill) {
2.     string cache = this.text;
3.     disableDirty = true;
4.      this.text = this.Decode( this.text );
5.      base.OnPopulateMesh(toFill);
6.      this.text = cache;
7.      disableDirty = false;
8. }

Everything worked fine after that.

Thanks to joihelgi & jagwire.

 

Here is a video showing how you can now combine multiple fonts, sprites and fonts with icons like Font Awesome in a single text object using TextMesh Pro.

 

It seems the fix proposed by Bahaa only works with text created at runtime, but texts already on the scene stays as "\uf005" ...

The 'old' version with OnFillVBO was working fine for all texts

Any suggestion?

 

@lune_clement Actually @joihelgi provided the right solution. I post the whole patched code in case someone wants to use it. And yes, it works instantly.

Code (CSharp):

1.  
2. /// <summary>
3. /// Courtesy of Leo Carneiro, Unity3d
4. /// http://forum.unity3d.com/threads/image-fonts-fontawesome.281746/#post-1862245
5. /// Patched version. Works in Unity 5.3.4x
6. /// </summary>
7.  
8. using System;
9. using System.Collections.Generic;
10. using System.Text.RegularExpressions;
11. using System.Globalization;
12.  
13. namespace UnityEngine.UI {
14.    public class TextUnicode : Text {
15.       private bool disableDirty = false;
16.       private Regex regexp = new Regex(@"\\u(?<Value>[a-zA-Z0-9]{4})");
17.      
18.         protected override void OnPopulateMesh(VertexHelper toFill) {
19.             string cache = this.text;
20.             disableDirty = true;
21.  
22.             this.text = this.Decode( this.text );
23.             base.OnPopulateMesh(toFill);
24.             this.text = cache;
25.  
26.             disableDirty = false;
27.         }
28.      
29.       private string Decode(string value) {
30.          return regexp.Replace(value, m => ((char)int.Parse(m.Groups["Value"].Value, NumberStyles.HexNumber)).ToString());
31.       }
32.      
33.       public override void SetLayoutDirty() {
34.          if (disableDirty) {
35.             return;
36.          }
37.        
38.          base.SetLayoutDirty();
39.       }
40.      
41.       public override void SetVerticesDirty() {
42.          if (disableDirty) {
43.             return;
44.          }
45.        
46.          base.SetVerticesDirty();
47.       }
48.      
49.       public override void SetMaterialDirty() {
50.          if (disableDirty) {
51.             return;
52.          }
53.        
54.          base.SetMaterialDirty();
55.       }
56.    }
57. }

 

Is there a way to use FontAwesome and normal text in the same Text element ?

 

Edit 2: Short answer, NO. You need to be creative in order to use 2 different font's together.

In my case, I wanted the Fb glyph in my UI Button, so I added a Horizontal Layout Group to my Button, then created a UI Text for the Facebook Glyph, changed Font to FontAwesome, put the Fb glyph in the text field and align to left middle. Next, I created another UI Text for my text button, choose my font, size, etc and align to right middle.



Edit: OOoops I see what do you mean, sorry. I'm using Font Awesome in a button and had to create a separated UI Text...

Maybe this can help: