LoginSignup
3
1

More than 5 years have passed since last update.

Ext JS 6 でのアイコン指定

Last updated at Posted at 2016-04-10

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> タグにクラスをセットします。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1