How can I show icons of Font Awesome into Unity using TextMesh Pro?

How can I show icons of Font Awesome into Unity using TextMesh Pro?

Unity 2018.1

TextMesh Pro v1.2.4

Font Awesome v5.1.0 DESKTOP


1. Open your Unity project and import TextMesh Pro using the Package Manager

2. Go to the website of Font Awesome and hit the Download Font Awesome Free / For the Desktop button.

3. Unzip the downloaded archive and copy paste all the fonts located inside the fontawesome-free-5.1.0-desktop/otfs folder into your Unity project (in a Fonts folder for example).

4. Click on Window > TextMesh Pro > Font Asset Creator

5. For each font In the Font Asset Creator set the following values :

- Font Source : <font_file>.otf

- Font Size : Auto Sizing

- Font Padding : 5

- Packing method : Fast (or Optimum, as you want)

- Atlas Resolution : 2048 x 2048

- Charactter Set : Unicode Range (Hex)

- Character Sequence : <unicode_range>

- Font Style : Normal, 2

- Font Rendering mode : Distance Field 16

The <unicode_range> values can be obtained as follow:

- Go to the Font Awesome cheatsheet and find the relevant section according to the font provided in the Font Asset Creator.

- Retrieve the hexadecimal code range of the desired icons you want to include, according to the provided font. The hexadecimal codes are written next to the name of the icon.

○ Regular = f004,f005,f007,f017,f022,f024,f02e,f03e,f044,f057,f058,f059,f06e,f070,f073,f075,f07b,f07c,f080,f086,f089,f094,f09d,f0a0,f0a4,f0a5,f0a6,f0a7,f0c5,f0c7,f0c8,f0e0,f0eb,f0f3,f0f8,f0fe,f111,f118,f119,f11a,f11c,f133,f144,f146,f14a,f14d,f14e,f150,f151,f152,f15b,f15c,f164,f165,f185,f186,f191,f192,f1ad,f1c1,f1c2,f1c3,f1c4,f1c5,f1c6,f1c7,f1c8,f1c9,f1cd,f1d8,f1e3,f1ea,f1f6,f1f9,f20a,f247,f248,f249,f24d,f254,f255,f256,f257,f258,f259,f25a,f25b,f25d,f271,f272,f273,f274,f279,f27a,f28b,f28d,f2b5,f2b6,f2b9,f2bb,f2bd,f2c1,f2c2,f2d0,f2d1,f2d2,f2dc,f2ed,f302,f328,f358,f359,f35a,f35b,f3a5,f3d1,f410,f4ad,f4da,f4e6,f556,f567,f579,f57a,f57f,f580,f581,f582,f583,f584,f585,f586,f587,f588,f589,f58a,f58b,f58c,f596,f597,f598,f599,f59a,f59b,f59c,f5a4,f5a5,f5b3,f5b4,f5b8,f5c2,f5c8

○ Solid = f000-f5ce (can be optimized to decrease the lookup time)

○ Brand = f081,f082,f08c,f092,f099,f09a,f09b,f0d2,f0d3,f0d4,f0d5,f0e1,f113,f136,f13b,f13c,f15a,f167,f168,f169,f16b,f16c,f16d,f16e,f170,f171,f173,f174,f179,f17a,f17b,f17c,f17d,f17e,f180,f181,f184,f189,f18a,f18b,f18c,f18d,f194,f198,f19a,f19b,f19e,f1a0,f1a1,f1a2,f1a3,f1a4,f1a5,f1a6,f1a7,f1a8,f1a9,f1aa,f1b4,f1b5,f1b6,f1b7,f1bc,f1bd,f1be,f1ca,f1cb,f1cc,f1d0,f1d1,f1d2,f1d3,f1d4,f1d5,f1d6,f1d7,f1e7,f1e8,f1e9,f1ed,f1ee,f1f0,f1f1,f1f2,f1f3,f1f4,f1f5,f202,f203,f208,f209,f20d,f20e,f210,f211,f212,f213,f214,f215,f216,f231,f232,f237,f23a,f23b,f23c,f23d,f23e,f24b,f24c,f25e,f260,f261,f262,f263,f264,f265,f266,f267,f268,f269,f26a,f26b,f26d,f26e,f270,f27c,f27d,f27e,f280,f281,f282,f284,f285,f286,f287,f288,f289,f28a,f293,f294,f296,f297,f298,f299,f2a5,f2a6,f2a9,f2aa,f2ab,f2ac,f2ad,f2ae,f2b0,f2b1,f2b2,f2b3,f2b4,f2b8,f2c4,f2c5,f2c6,f2d5,f2d6,f2d7,f2d8,f2d9,f2da,f2dd,f2de,f2e0,f35c,f368,f369,f36a,f36b,f36c,f36d,f36e,f36f,f370,f371,f372,f373,f374,f375,f378,f379,f37a,f37b,f37c,f37d,f37f,f380,f383,f384,f385,f388,f38b,f38c,f38d,f38e,f38f,f391,f392,f393,f394,f395,f396,f397,f399,f39a,f39d,f39e,f39f,f3a1,f3a2,f3a3,f3a4,f3a6,f3a7,f3a8,f3a9,f3aa,f3ab,f3ac,f3ad,f3ae,f3af,f3b0,f3b1,f3b2,f3b4,f3b5,f3b6,f3b7,f3b8,f3b9,f3ba,f3bb,f3bc,f3bd,f3c0,f3c3,f3c4,f3c6,f3c7,f3c8,f3ca,f3cb,f3cc,f3d0,f3d2,f3d3,f3d4,f3d5,f3d6,f3d7,f3d8,f3d9,f3da,f3db,f3dc,f3df,f3e1,f3e2,f3e3,f3e4,f3e6,f3e7,f3e8,f3e9,f3ea,f3eb,f3ec,f3ee,f3ef,f3f3,f3f5,f3f6,f3f7,f3f8,f3f9,f3fe,f402,f403,f404,f405,f407,f408,f409,f40a,f40b,f40c,f40d,f411,f412,f413,f414,f415,f416,f417,f418,f419,f41a,f41b,f41c,f41d,f41e,f41f,f420,f421,f423,f425,f426,f427,f428,f429,f42a,f42b,f42c,f42d,f42e,f42f,f430,f431,f44d,f452,f457,f459,f4d5,f4e4,f4e5,f4e6,f4e7,f4e8,f4e9,f4ea,f4eb,f4ec,f4ed,f4ee,f4ef,f4f0,f4f1,f4f2,f4f4,f4f5,f4f6,f4f7,f4f8,f4f9,f50a,f50b,f50c,f50d,f50e,f50f,f510,f511,f512,f513,f514,f592,f59e,f5a3,f5a8,f5b5,f5be,f5c6,f5cc,f5cf

6. Hit the “Generate Font Atlas” button, and then, the “Save” (or “Save as”. You have successfully created the Font awesome font!

7. Find the Text Mesh Pro settings (an asset called TMP Settings), and add all the font assets you have created into the Fallback Font Asset List

8. Create a Canvas with a TextMeshPro UGUI and type the text you want. In order to display a Font Awesome icon, copy-paste the Unicode value of the icon you want precedeed by \U into the text input box. (Example for the regular eye, I put \uf06e)


Unity 2017.1

TextMesh Pro v1.0.55

Font Awesome v4.7.0


1. Open your Unity project and import TextMesh Pro from the Asset Store.

2. Go to the website of Font Awesome and hit the download button.

3. Unzip the downloaded archive and import the font-awesome-4.7.0/fonts/fontawesome-webfont.ttf file into your Unity project (in a Fonts folder for example).

4. Click on Window > TextMesh Pro > Font Asset Creator

5. In the Font Asset Creator set the following values :

- Font Source : fontawesome-webfont

- Font Size : Auto Sizing

- Font Padding : 5

- Packing method : Fast (or Optimum, as you want)

- Atlas Resolution : 2048 x 2048 (4096 x 4096 crashed my Unity)

- Charactter Set : Custom Range

- Character Sequence : 61440-62176 (See bottom note to understand why these values)

- Font Style : Normal, 2

- Font Rendering mode : Distance Field 16

6. Hit the “Generate Font Atlas” button, and then, the “Save TextMeshPro Font Asset”. You have successfully created the Font awesome font!

7. Find the Text Mesh Pro settings (an asset called TMP Settings), and add the font asset you have created (mine is called fontawesome-webfont SDF) into the Fallback Font Asset List

8. Create a Canvas with a TextMeshPro UGUI and type the text you want. In order to display a Font Awesome icon, copy-paste the Unicode value of the icon you want precedeed by \U0000 into the text input box. (Example for the fa-hand-spock-o, I put \U0000f259) (See footnote #2)


Footnote #1 : Why do we put 61440-62176 in the Character sequence ?

Those values are the min and max Unicode values used by Font Awesome to render the characters. (See footnote #2)

In order to know the correct values to put, you have to:

1. Find the smallest Unicode value (should be f000 representing the glass) and convert to decimal (using a Hexadecimal to Decimal Converter you will find on the web, or use the Windows calculator in programmer mode). You should get 61440.

2. Find the biggest Unicode value (currently, it is f2e0 representing the logo of an online social networking service) and convert to decimal. You should get 62176.

To find the smallest and biggest Unicode value in hexadecimal. I use a simple “Search in page” and I use a Binary search.


Foot note #2 : What is the Unicode value of a font awesome icon ?

1. Go to Font Awesome website and find the Cheatsheet (should be accessible from the Icons page)

2. Next to each icon, you will see its Unicode value preceded by &#x and followed b a semi-colon.

Example For the arrow-down, you will see []. The Unicode value of this icon is f063