FlashでFontAwesomeを使う。

2015-11-20

このように使えるようにします。

// starling.text.TextFieldです
var tf:TextField = new TextField(1, 1, '');
tf.autoSize = TextFieldAutoSize.BOTH_DIRECTIONS;

tf.fontName = Fa.name;
tf.text = Fa.char.apple;

ソース: https://gist.github.com/mmmpa/2c28db1948a07b1c8f7f

手順

Haxeを使っていますが、ふつうのFlashでも手順はかわらないと思います。

fontawesome-webfont.ttfをembedで埋めこんで登録します。

import flash.text.Font;

@:font("../lib/font-awesome/fonts/fontawesome-webfont.ttf") class Fa extends Font {
  public static var name:String = (function(){
    Font.registerFont(Fa);
    return new Fa().fontName;
  })();

 // 省略
}

これで名前が簡単に引っぱれるようになります。

アイコンの指定をCSSセレクタと同じ感じにできるようにする。

font-awesomeはCSSのプロパティのcontentで、アイコンを割りあてた文字を表示しています。

// これがcontentに入る
$fa-var-apple: "\f179";

しかしこの"\f179"という形で使おうとするとInvalid escape sequenceというエラーでコンパイルを完了できません。

なので全体的に"\uf179"このように書きかえます。\の後ろにuが入ります。

そしてセレクタをキャメルケースに変更してkeyとし、コードをvalueとしてDynamicオブジェクトに割りあてれば終了です。