アイコンフォントで簡単装飾

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> アイコンだけ赤く大きくしてみました。

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

このサイトの更新を受け取る

投稿者プロフィール

demomasterWordPressエンジニア
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わっています。
[ 著書 ]
・いちばんやさいいWordPressの教本(共著)
・現場でかならず使われているWordPressデザインのメソッド(共著)
[ 最近のWordPressコミュニティでの活動 ]
2016 WordCampKansai ハンズオン世話役
2015 WordCampTokyo セッションスピーカー
2015 WordCampKansai セッションスピーカー
2014 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCampTokyo セッションスピーカー(パネラー)
2013 WordFesNagoya 実行委員 & セッションスピーカー