Sencha Ext JS 6 では FontAwesome がバンドルされています。
ボタンのアイコンなどはこれで指定するとイメージとか用意しなくていいし便利です。それにRetina などで表示したときに綺麗です。
指定の仕方は簡単です。
iconClsで
iconCls コンフィグでアイコンを指定する場合は、x-fa
というクラスとアイコン名を指定します。アイコン名はFontAwesome cheetsheet に載っている名前です。
次のように指定します。
iconCls: 'x-fa fa-home'
glyph で
glyph で指定することも可能です。
その場合は、Cheetsheet の名前の横に置いている16進コードを使います。
さきほどの fa-home アイコンなら、 []
と表示されていると思います。
この x以降を使い、後に @FontAwesome
をつけます。
次のように指定します。
glyph : 'xf019@FontAwesome'
コンポーネントの中にアイコンを表示したいときには
html: '<i class="fa fa-compass"></i>',
と、<i>
タグにクラスをセットします。