Font Awesome で装飾しよう!

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

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

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

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

使い方

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

Font Awesome

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

font-awesome_1

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

font-awesome_2

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

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

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

<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 セッションスピーカー 他

スポンサーリンク