jQuery Mobileを利用したボタンにアイコンが表示されない問題を解決する

jQuery Mobileを利用するとボタンにアイコンを簡単に表示させることができますbutton要素の中に”data-icon”属性を追加することでアイコン付きボタンを表示させることができるのですが、そのアイコンが表示されない問題に遭遇しました。

<button data-icon="add">追加</button>

原因はjquery.mobile-1.2.0.min.cssを配置したフォルダに、jQuery Mobileのライブラリに含まれているimagesフォルダを配置していなかったためでした。このフォルダを適切に配置することで問題は解決できました。


ファイル配置
PhoneGapとjQuery Mobileを使ったネイティブアプリ開発でのファイルの配置はよくよく調べてみるとイケてないことに気づいたので、次のように修正しました。

ライブラリを適切にインポートして実行すると正しくアイコンは表示されました。