【Unity】フォント「Font Awesome」を使ってアイコンを表示する方法

数百個のアイコンが格納されているフォント「Font Awesome」を使ってアイコンを表示する方法です。

これを上手く使うと、アイコン探さなくてもすぐに仮素材できるのではと思い試してみました。

フォントのダウンロード

下記からダウンロード

Font Awesome

解凍。

fontawesome-free-5.0.2\use-on-desktopに3種のフォントが格納されています。

Unityで表示する方法

チートシートから、アイコンをコピーし

uGUIのTextへ、ペーストすれば表示されます。

下記はロックアイコンfa-lock []のところのアイコン部分をコピー

Unicodeで表示する方法

InspectorのTextエリアには何も表示されないまま、使うのはあれなので、Unicodeで文字を表示してみます。

下記のスクリプトを作成します。

TextUnicode.cs

/// <summary>
/// Courtesy of Leo Carneiro, Unity3d
/// http://forum.unity3d.com/threads/image-fonts-fontawesome.281746/#post-1862245
/// Patched version. Works in Unity 5.3.4x
/// </summary>
using System;
using System.Collections.Generic;
using System.Text.RegularExpressions;
using System.Globalization;
namespace UnityEngine.UI {
public class TextUnicode : Text {
private bool disableDirty = false;
private Regex regexp = new Regex(@"\\x(?<Value>[a-zA-Z0-9]{4})");
protected override void OnPopulateMesh(VertexHelper toFill) {
string cache = this.text;
disableDirty = true;
this.text = this.Decode( this.text );
base.OnPopulateMesh(toFill);
this.text = cache;
disableDirty = false;
}
private string Decode(string value) {
return regexp.Replace(value, m => ((char)int.Parse(m.Groups["Value"].Value, NumberStyles.HexNumber)).ToString());
}
public override void SetLayoutDirty() {
if (disableDirty) {
return;
}
base.SetLayoutDirty();
}
public override void SetVerticesDirty() {
if (disableDirty) {
return;
}
base.SetVerticesDirty();
}
public override void SetMaterialDirty() {
if (disableDirty) {
return;
}
base.SetMaterialDirty();
}
}
}

引用

Error | Unity Community

表示方法

uGUIのTextコンポーネントは外し、代わりにTextUnicode.csをアタッチします。

あとは先程のチートシートから、Unicodeを打ち込めばOK

例えば、ロックアイコンであれば、fa-lock []をいう表記を探して、\xf023と打ち込む

参考

Unity3D UI Typography: Font Awesome – Unity3D UI Typography: Font Awesome – appmixable