アイコンフォントで簡単装飾
Font Awesome で提供されているアイコンをテーマ内で利用できるようになります。
機能を有効にすると Font Awesome のフォントを CDN で読み込む link style タグを html head タグ内へ出力します。
どんな感じに表示されるの?
↑の先頭に というのがありますよね? こんな感じで文中にアイコンを挿入出来るようになっています。
使い方
使えるアイコンの一覧は下記のページにあります。
一覧の中から使用したいアイコンをクリックします。
各アイコンのページに移動するので、 i タグの部分をコピーします。
これを挿入したいページの編集画面でテキストモードで貼り付けます。ビジュアルモードで貼り付けてもタグがそのまま表示されますのでご注意を…
ちなみにこのアイコンは画像ではなく “フォント” なので、文字サイズを大きくすれば大きくなりますし、文字に色をつければアイコンにも色がつきます。
アイコンだけ赤く大きくしてみました。
<span style="color:red;font-size:20px;"><i class="fa fa-check-circle"></i></span> アイコンだけ赤く大きくしてみました。
ただし、使いすぎるとそれはそれでゴチャゴチャしてしまうので、ほどほどにしましょう!
投稿者プロフィール
-
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わっています。
[ 著書 ]
・いちばんやさいいWordPressの教本(共著)
・現場でかならず使われているWordPressデザインのメソッド(共著)
[ 最近のWordPressコミュニティでの活動 ]
2016 WordCampKansai ハンズオン世話役
2015 WordCampTokyo セッションスピーカー
2015 WordCampKansai セッションスピーカー
2014 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCampTokyo セッションスピーカー(パネラー)
2013 WordFesNagoya 実行委員 & セッションスピーカー
他
最新の投稿
- Ligthning2016年8月12日デザイン拡張プラグイン「Charm」の販売を開始
- カスタマイズ2016年8月9日ヘッダーの固定・高さ自動調整機能をオフにする
- ExUnit2016年8月7日トレンドを取り入れた機能とデザインの PR Blocks
- Ligthning2016年6月17日モバイル時のスライドショーの表示を改善