新しく実装されたアイコンフォントを使ってページを装飾しよう！

投稿日 : 2015年5月8日最終更新日時 : 2015年5月8日投稿者 : kurudrive カテゴリー : 機能紹介・手記

すっかり投稿してなくてすみません。いしかわです。

さて、BizVektor 1.7.0 からFont Awesome を標準で実装しました。これが何かと言いますと、いろんなアイコンをページの中で簡単に使えるようになるのです。

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

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

使い方

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

Font Awesome

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

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

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

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

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

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

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

この記事を書いた人

kurudriveBizVektorコア開発者

名古屋で株式会社ベクトルというウェブ制作会社をしています。
普段はWordPressを使って企業サイトなどを制作しつつ、
WordPress関連のイベントにもよく顔を出しています。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
2014 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCampTokyo セッションスピーカー（パネラー）
2013 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCrabFukui セッションスピーカー
他