Font Awesome で装飾しよう!

Font Awesome で提供されているアイコンをテーマ内で利用できるようになります。

機能を有効にすると Font Awesome のフォントを CDN で読み込む link style タグを html head タグ内へ出力します。

どんな感じに表示されるの?

↑の先頭に というのがありますよね? こんな感じで文中にアイコンを挿入出来るようになっています。

使い方

使えるアイコンの一覧は下記のページにあります。

Font Awesome

一覧の中から使用したいアイコンをクリックします。

font-awesome_1

各アイコンのページに移動するので、 i タグの部分をコピーします。

font-awesome_2

これを挿入したいページの編集画面でテキストモードで貼り付けます。ビジュアルモードで貼り付けてもタグがそのまま表示されますのでご注意を…

ちなみにこのアイコンは画像ではなく “フォント” なので、文字サイズを大きくすれば大きくなりますし、文字に色をつければアイコンにも色がつきます。

アイコンだけ赤く大きくしてみました。

<span style="color:red;font-size:20px;"><i class="fa fa-check-circle"></i></span> アイコンだけ赤く大きくしてみました。

ただし、使いすぎるとそれはそれでゴチャゴチャしてしまうので、ほどほどにしましょう!

Leave a Reply

Your email address will not be published. Required fields are marked *