jQueryMobileでTwitterやFacebookアイコン指定する方法

jqicon

探していたら、海外サイトにピンポイントで載っていました。
CSSにちょこっと書くだけなんですね。

例えばTwitter

CSS


.ui-icon-twitter {
     background: url(icon.png) no-repeat 0 50%;
}

HTML


<a href="" data-role="button" data-icon="twitter" />Twitter</a>

あ、とてつもなく簡単だった。。

http://twitter.com/favicon.icoファビコンを直接取り込むのもいいかもしれませんね。

アイコンを右側にもっていきたいときはdata-iconpos="right"属性を追加。

画像が小さいのでデータスキーム使うと便利です。


.ui-icon-noIE {
     // base64変換した画像を指定
     background-image: url(data:image/png;base64,....);
     background-repeat: no-repeat;
     background-position: 0 50%;
     // サイズも調整可能
     background-size: 18px 18px;
}

参考

jQuery Mobile icons | add custom button icon, data-icon