東京マラソン2016は落選さ、Font Awesomeで「落胆」を表してみました

かねてからやろうと思っていた Font Awesome の設置を行いましたので、昨日の東京マラソン 2016 の「落胆」を表現してみました。

オマエは落選じゃぁ～

rz

倍率約 11 倍では仕方ないです。
これで 3 年連続。。。ん？まだまだ落ちるって :8O:

Font Awesome

thumbs-down、矢印、回転している輪っかは画像のように見えますが Web フォントです。
フォントなので文章の途中に入れることもできれば、大きさの変更も可能、背景画像の代わりに使ったりアイコンとして要所要所で使えそうです。

たとえばこんなの

通常アイコンの部分は画像 (背景画像) を用意する必要がありますが、Download という文字の前に

<i class="fa fa-download fa-fw"></i>

を付けるだけで Download アイコンが表示されます。

冒頭の Font Awesome の記述もこのようにカンタン。青字 の部分が Font Awesome として表示されている部分です。

<p class="aligncenter"><i class="fa fa-thumbs-o-down fa-5x"></i></p>
<p class="aligncenter"><i class="fa fa-thumbs-o-down fa-4x"></i></p>
<p class="aligncenter"><i class="fa fa-thumbs-o-down fa-3x"></i></p>
<p class="aligncenter"><i class="fa fa-thumbs-o-down fa-2x"></i></p>
<p class="aligncenter"><i class="fa fa-thumbs-o-down"></i></p>
<p class="aligncenter"><span class="red"><i class="fa fa-share fa-rotate-90"></i></span><i class="fa fa-spinner fa-spin fa-fw"></i><strong>rz</strong></p>

フォント数はかなりの数が用意されていて、90度ずつ回転させたり、アニメーション GIF のようにクルクルと回転するさせたり、重ねたり、いろんなことができるようです。

表示できるフォント一覧 (オフィシャルサイト)

Font Awesome Icons 

設置および使用にあたっては下記のサイトがとても参考になりました。

楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips - HAM MEDIA MEMO 

ありがとうございました。

この投稿のカテゴリーは「Sports」、タグは「Marathon」。。。全然関係ないじゃん