今回は、Sencha Font Packagesの記事を参考にフォントアイコンについて紹介します。Sencha Ext JS6では新たにTritonというフラットデザインのテーマが追加されましたが、この中ではFont Awesomeのフォントアイコンが多く使われています。Font Awesomeだけでも多くのアイコンが用意されているので、困ることは少ないかもしれないですが、Font Awesome以外のアイコンも使うケースとして、Pictosのフォントアイコンを使う方法を紹介します。

準備

まずは、プロジェクトルート直下にある、app.jsonのrequiresを以下のように編集して、Pictosを使うための準備をします。

ここで一度、以下のSencha Cmdを実行してください。

$ sencha app build

もしそのときに、以下のような警告が出力されている場合は、Ext JSのバージョンが古い可能性が高いです。Sencha Ext JS6の体験版（ext-6.0.0.415）では、Pictosの対応が入っていませんでしたが、現在の最新版（ext-6.0.0.640）では対応しているので、最新版を落としてから試してください。

ここで少し余談になりますが、Sencha Cmdでは、Ext JSのバージョンをアップグレードすることも可能です。今回はext-6.0.0.640にするので、以下のようなコマンドを叩きました。最後の引数は、ローカル環境のライブラリの配置場所を指定しています。

$ sencha app upgrade ~/Library/Sencha/ext-6.0.0.640/

この時に、以下のようなエラーが出る場合はSencha Cmdのバージョンが古いということなので、エラーコメントに記載があるバージョンのSencha Cmdをダウンロードとインストールしてください。ダウンロードはこちらから可能となっています。

Sencha Cmdを最新にしたら、環境変数を新しいコマンドのパスに変更し以下のコマンドを実行して下さい。

$ sencha

以下のようにインストールしたバージョンになっていれば準備OKです。

コーディング例

あとは、以下のようにアイコン表示させたいコンポーネントに対して、クラスを指定するだけになります。

上記のコーディング例の表示が以下になります。Pictosのフォントアイコンが表示されていますね。

いかがでしたでしょうか？環境だけ元々最新で構築していれば特にハマる部分もなく出来たかと思います。次回は、自分で作ったフォントアイコンやダウンロードしてきたフォントアイコンを組み込んで表示させてみます。