2013年6月19日水曜日

jQueryMobileにアイコンを追加

facebookや、youtubeのようなメニューをjQueryMobileのPanelで実装しました。

がしかし、横三本ボーダーのようなアイコンがありません。。。

どうしようかなぁ~っと色々検索したところ、下記のサイトが良さそうです。

andyMatthews.net

このサイトの左メニュー 
projects>jQuery Mobile Icon Pack の画面内にある
「Download from Github」から
ZipファイルをDLすることができます。

使用方法はZipファイルを解凍し、作成しているサイトの
CSSを置く場所に以下の3つを設置します。
・fontフォルダ
・imagesフォルダ
・jqm-icon-pack-fa.css

次に、htmlで「jqm-icon-pack-fa.css」を読み込みます。

後はアイコンを使用させたい箇所に 
data-icon="smile" 
と追加すれば、アイコンが表示されます。

各アイコンの名称は
projects>jQuery Mobile Icon Pack
の「Font Awesome Icons」から確認することができます。

ちなみに、僕が欲しかった横三本ボーダアイコンは  
data-icon="reorder" 
で表示できました。

0 件のコメント:

コメントを投稿