jQuery Mobile デフォルトアイコンを拡張する

jQuery Mobile のデフォルトアイコンセットに Font Awesome ライブラリをベースにしたアイコンを拡張できます。デフォルトの50種に加え、Font Awesomeの369種類のアイコンが jQuery Mobile の書式で使えるようになります。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. アイコンパックをダウンロードする
  2. ディレクトリへ各ファイルを設置する
  3. HTMLを記述する
  4. アイコンの表示位置を調整する
  5. カスタムアイコンパックを作成する

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

アイコンパックをダウンロードする

下記ページにアクセスし、GitHubから「jQuery Mobile Icon Pack」をダウンロードします。
https://github.com/commadelimited/jQuery-Mobile-Icon-Pack

アイコンパック ダウンロード画面

ダウンロードした zipファイルに含まれている主なファイルは以下になります。

ファイル 説明
jqm-icon-pack-fa.css アイコンを利用するためにインクルードするCSSファイルです。
アイコンのPNGファイル SVGが使えない環境で使用します。
アイコンのSVGファイル SVGはCSS内にdata URIで記述されていますので今回は使いません。
index.html ブラウザで開くとアイコンリストが表示されます。アイコン名を調べるにはこのファイルを参照します。

ディレクトリへ各ファイルを設置する

「jqm-icon-pack-fa.css」を適切なディレクトリへ設置します。特に場所は規定しません。

次に「jqm-icon-pack-fa.css」を設置したディレクトリの下に、[png_icons]ディレクトリを作成し PNGファイルをそっくりコピーします。PNGファイルを格納するディレクトリ名はバージョンによって違うみたいですので、うまく動作しない場合は CSSを確認してください。

HTMLを記述する

「jqm-icon-pack-fa.css」を読み込むコードを head要素内に追加します。

これで jQuery Mobile の記述ルールに沿って、拡張した Font Awesome アイコンを表示できます。
データ属性を使い「data-icon="アイコン名"」を指定するか、ui-icon-[アイコン名]のクラスを指定します。SVGではなく PNGファイルで表示する場合は、親要素に ui-nosvgクラスを指定します。

なおデフォルトアイコンでは ui-alt-iconクラスを付加すると黒いアイコンを表示できますが、今回の拡張したアイコンは白だけです。

アイコンの表示位置を調整する

アイコンによっては表示位置がずれているものもあります。
下の図で anchor は中心にありますが、i05 や forward は左に少しずれています。

アイコン表示位置がずれた画面

位置を調整するには CSSに background-positionプロパティを追加します。
例えば以下のようにします。

位置を調整すると、以下のようになります。

アイコン表示位置を調整した画面 width=

カスタムアイコンパックを作成する

ダウンロードしたアイコンパックに含まれているCSSファイルは、すべてのアイコンのインラインSVGコードを含んでいるため、サイズが非常に大きくなっています。
必要なアイコンだけを残し、あとは削除したCSSを作成すればいいのですが、ツールも用意されています。

以下のページにアクセスし、必要なアイコンを選択してファイルをダウンロードします。
http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/builder/

カスタムアイコンパック作成画面

拡張したアイコンを表示した DEMOページは以下になります。

デフォルトアイコンの50種類だけでは少し足りないですが、Font Awesomeのアイコン 369種類が追加されたらほとんどのケースに対応できるのではないでしょうか。jQuery Mobile ではこのように拡張性があることも使い勝手をよくしています。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ