jQuery Mobileはたいへん便利だが、BootstrapのGlyphiconsほど豊富なアイコンは用意されていない。ボタンやナビゲーションにちょっと気の利いたアイコンを加えたいときに不便である。Glyphiconsを引っ張ってくるのも面倒だし、何か良い方法はないか、そういえばGlyphiconsにインスパイアされたWebフォントがあったな、と記憶の糸をたどって検索。そうしたらFont Awesome icons now included in jQuery Mobile Icon Pack – andy matthewsというまさに求めていたものが見つかった。
jQuery Mobile Icon Packは、Font AwesomeをjQuery Mobileから使えるようにまとめたもので、CSSのフォルダにいくつかファイルを追加するだけで使えるようになる。リンク先のGithubからzipを落として解凍すると、フォルダ内に「font-awesome」というフォルダがある。さらにその中に「jqm-icon-pack-3.0.0-fa.css」というCSSファイルとfontフォルダ、imagesフォルダがある。この3つを適当なフォルダ（jquery.mobile.cssなんかを入れているフォルダと同じフォルダとか）にまとめてコピーし、あとはHTMLに「<link rel=”stylesheet” href=”インストール先/jqm-icon-pack-3.0.0-fa.css” />」を追加する。
使うときはjQuery Mobileでアイコンを表示する時と同様の記述をすれば良い。たとえばnavbarにアイコンを表示するなら次の通り
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li><a href="#search" data-icon="search">Search</a></li>
<li><a href="#edit" data-icon="pencil">Edit</a></li>
<li><a href="#bookmark" data-icon="tag">Tag</a></li>
<li><a href="#config" data-icon="gear">Config</a></li>
</ul>
</div>
上図のタグや鉛筆のアイコンがIcon Pack独自のものである。素晴らしい。Andyさんに感謝。
