MyMemoにFontAwesomeのアイコンを使う練習をしてみた

２ちゃんねるのウィジェットスレを参考にしました。

Font Awesome Icons
The complete set of 479 icons in Font Awesome 4.2.0You asked, Font Awesome delivers with 40 shiny ne...

FontAwesomeというのはWebフォントというフォントで、文字としてアイコンを提供しています。HTMLでcssを読み込めば使えるようになる。文字として扱われるので、MyMemoでのメニューに使うと読み込みが軽いわけです。

iPad用の登録リンクはこちら→ http://tinyurl.com/k5cmbaa

こんな風な表示になります。

ソースは下記の通り。

<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

<style>
.icon {
 width: 40px;
 font-size: 40px;
 text-align: center;
 margin: 8px;
 padding: 8px;
 display: inline-block;
 border: 2px solid gray;
 border-radius: 5px;
}
</style>



<a href="sysight://allkill" class=icon>
    <i class="fa fa-bomb"></i>
</a>
<a href="textwell:" class=icon>
    <i class="fa fa-edit"></i>
</a>
<a href="flipboard:" class=icon>
    <i class="fa fa-bookmark"></i>
</a>
<a href="x-web-search://?_Q_" class=icon>
    <i class="fa fa-google"></i>
</a>
<a href="safarihttp://m.youtube.com/results?q=_Q_" class=icon>
    <i class="fa fa-youtube"></i>
</a>
<a href="calshow:" class=icon>
    <i class="fa fa-calendar"></i>
</a>
<a href="mymemo://?home" class=icon>
    <i class="fa fa-android"></i>
</a>

aタグにURLスキームを、iタグにFontAwesomeのアイコン名を書きます。MyMemoの高さは 90 にしました。表示が速いし、それでいて分かりやすい。適切なアイコンを探さないといけないけれど、カスタマイズしやすいと思います。

あ、設定アプリに飛ぶメニューにしたほうが良かったか。

iPhone設定用はこちら→ http://tinyurl.com/kfvgpye