jQuery Mobileでカスタムアイコンを使う(2)

jQuery Mobileで使えるアイコンを探していたら、’jQuery Mobile Icon Pack‘ を見つけた。

使い方は以下のとおり。

• GitHubから一括ダウンロードする
  アイコンファイルは以下。(スプライト方式なので、1つのファイルに複数のアイコンが格納されている。)
  ajax-loader.png
  icons-18-black-pack.png
  icons-18-white-pack.png
  icons-36-black-pack.png
  icons-36-white-pack.png
• アイコンファイルを配置する
  上記のアイコンファイルをjQuery Mobileと同じ’images’フォルダに配置する(場所に特段の縛りはない)。またアイコンパックのCSSファイルを適宜配置する。

  <!-- HTML -->
  <link rel="stylesheet" href="/XXX/jqm-icon-pack-3.0.0-fa.css" />
  

• フォントファイルを配置する
• アイコンを利用する

  <!-- HTML -->
  <button data-icon="cloud-download">cloud-download</button>
  <button data-icon="coffee">coffee</button>
  <button data-icon="food">food</button>
  

• 実行例