しきしまにっき

たんなる日記です

5分で終わるブログカスタマイズ!「Font Awesome」でいい感じのウェブフォントアイコンを実装してみた

どうも。しきしま(@Hisayuki__S)です。

突然ですが、ブログに「Font Awesome」を追加してみました。

フォントオーサム...?

「Font Awesomeって何?」って感じですよね。こんなのです↓

AMPでは今のところ表示されないので、念のため「Font Awesome」をスクショした画像も貼っておきましょう。

この「Font Awesome」とやらは、画像じゃなくてWebフォントなので、普通の文字と一緒で軽いらしいです。

しかも、拡大してもギザギザならないし、何だかシャレオツだし、もう最高ってのが「Font Awesome」という強者です。

「Font Awesome」を使う方法

難しいネーミングのフォントアウェサム?だが、実装方法はくっそ簡単!

5分で出来ます。はいっ

手順

まずは「Font Awesome」のサイトに飛んでメールアドレスを入力。

送られてきたメールにあるコードをコピーして...

はてなブログの「headに要素を追加」という場所にコピペすればOK!

あとは「Font Awesome アイコン一覧」から好きなアイコンをクリックして、オレンジの枠で囲ったあたりのコードを貼り付ければOKです。(見たままモードじゃダメらしい)

カメラアイコンならこれです↓

<i class="fa fa-camera-retro" aria-hidden="true"></i>

HTMLとして貼るとこうなります↓

ちなみに、fa-fwっていうのをこんな風にclass内に入れると、

<i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>

いい感じで余白を開けてくれるので便利です。

フォントヴォーサム?

最高なんで付けてみて下さい。

てなわけで、今日のところは終わります。