Font Awesome 5 in UE4

Not sure if someone has already posted this or not but I noticed recently Font Awesome 5 comes with a desktop font version.

You can find it here https://use.fontawesome.com/releases…free-5.0.7.zip.

Extract and install like any other font in UE4. Keep in mind it has 2 versions. Regular and Solid and one glyph might work on one and not the other so its better to have them both installed.

This is pulled directly from the Font Awesome website


 

  1. **1. Grab and install the typeface files**


	Each visual style has a corresponding typeface file. Find the ones you want to use in the use-on-desktop folder and **install** and **activate** them in your operating system's Font Manager (e.g. Font Book on Mac OS X). Not sure how to do that? Check out these [PC](https://www.fontspring.com/support/installing/how-do-i-install-fonts-on-my-windows-pc) and [Mac](https://www.fontspring.com/support/installing/how-do-i-install-fonts-on-my-mac) help articles.
  1. **2. Check Out [The Cheatsheet](https://fontawesome.com/cheatsheet)**


	We've listed out all of our icons, their names, unicodes, and glyph in a handy copy-able list that's a fan-favorite when you're desktop or design-focused - in a [Free](https://fontawesome.com/cheatsheet/free) and [Pro](https://fontawesome.com/cheatsheet/pro) version.
  1. **3. Use in a Document**


	Open a file in a design application (ex. [Sketch](https://www.sketchapp.com/), [Adobe Illustrator](https://www.adobe.com/products/illustrator.html), etc.).

	Create a new text layer/area and change the font family of that layer to the style of Font Awesome icon you'd like to use (e.g. "**Font Awesome 5 Free Solid**").

**Type [any icon](https://fontawesome.com/icons)'s name** (e.g. "plus-circle") as text in that layer - the ligatures should transform it into the icon itself!

 

Now sadly, I haven’t been able to get the “plus-circle” example to work but I found a work around and made a gif to demonstrate.

http://replicantworlds.com/fontawesome.gif

Late to this topic, but in order to get the “plus-circle” example to work for a TextBox in UMG, make sure you set Text Shaping Method to “Full Shaping”. This will enable ligatures.
Find this setting at the bottom of the TextBox Details under Localization->Advanced->Text Shaping Method.

3 Likes

Thanks man! It worked.

Working setup checklist

Import the Font Awesome 5 Free .otf/.ttf as a standalone Font asset (not part of a Composite Font)
Assign that font directly on the Text Block / Editable Text style
Localization → Advanced → Text Shaping Method → Full Shaping
Type the plain icon name as text (e.g. plus-circle) — the ligature swaps it for the glyph automatically
If it still renders as literal text, check the font variable actually points to the Free/Solid/Brands weight that contains that specific ligature