自作ツール＆スクリプト

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

2017年12月26日

SHARE

数百個のアイコンが格納されているフォント「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

目次に戻る

前の記事

【Unity】uGUIでカラーやグラデなどの加工を付ける方法

次の記事

【Unity】unitettcでフォント（.ttc）を分割して…