アイコンWebフォントを使ってみる
アイコンをフォントとして使えるアイコンWebフォントはフォントなどでたくさんの利点があってなによりも気軽に使えます。
アイコンWebフォントでも代表的なのがFont Awesome。今まで文中などで必要なときにちょこっと使っただけだったので今回は本格的に導入してみます。
Font Awesomeの利点
Font AwesomeはWebフォントで使うのでCSSで色やサイズを手軽に好きなように変えることができます。普通のアイコンだと色を変えるだけでも大変で、小さいサイズだったらいいけど大きいサイズに変更するのは不可能に近い場合もありますよね。
Font Awesomeはそんな苦労をすることなく手軽に使えちゃうんです。
こいうのがあるとデザイナー系ではない自分には好都合♪ アイコンなんてデザインできないし作ってもよいのができそうにないので(^_^;)
ただし、デザイナーさんには物足りないかもしれないがデザイナーさんでも適材適所で使ってる人が多数いるのでちょっとした字間などに入れたりポイントとしてリンクの前に入れたりするのには非常に便利です。
Font Awesomeのサイトを見てみる
Font Awesomeのフォントアイコンを使えるようになるには最初にCSSなど設定をしなければ使えるようにならないのですが、ワードプレスですとプラグインを入れるだけで使えるようになります。
とりあえずはFont Awesomeのサイトをみてどんなフォントアイコンが使えるかチェックしてみましょう。
なお、プラグインも入れたくない方はCSSを直接よみこめば使えるようになります。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
CSSはいろいろありますので気に入ったを読み込んでください。
WPプラグインFont Awesome 4 Menusインストール
Font Awesome 4 Menusはワードプレスの「外観」＞「メニュー」にあるリンクの前にアイコンをつけてくれるプラグインです。
これを入れたらFont Awesomeのタグでどこでもアイコンを表示できるようになります。
Font Awesome 4 Menusで検索すると出てきます。
まずはこちらをインストールしてみましょう。
設定＞Font Awesome に設定するページがあります。
こちらで設定できますが特に変更することなくデフォルトで使えてます。
メニューにアイコンを表示させてみる
では早速トップにあるメニューのリンクの前にアイコンを表示させてみます。
Font Awesomeのアイコンのページから使いたいアイコンの名前を調べます。
外観＞メニューの右上にある「表示をプション」をクリックして「CSSクラス」をチェックします
CSS classが表示されるので先ほどのアイコンの名前を記入
このように表示されます。
うまくいきました♪少し見た目も良くなった気がします。
本文中にアイコンを表示させる
本文中にHTMLタグを入れる場合はワードプレスではちょっとコツというか勝手に消されちゃう場合がある（汗）ので注意が必要です。
<i class="fa fa-home"></i>←「テキスト」表示にさせて通常はこのタグを入れますがこのままだと消えちゃいます（汗）
<i class="fa fa-home"></i> ホーム←このようにタグの後ろになにか文字か全角スペース(半角スペースだと消えます）が無いと消えちゃうのです。
ホーム
<i class="fa fa-home"></i> ←文字を表示させたくない場合は全角スペースをタグの後ろに追加すれば消えません。
タグを直接挿入するのはちょっとメンドウですがたまにしか使わない場合はこれで良いのかもしれません。
HTMLタグを直接いれずにプラグインで簡単にアイコンを挿入したい
この場合はプラグインを入れるとワードプレスのエディターの上のボタンが並んでるところに「Icons」ボタンを表示させて好きなアイコンを選ぶだけで本文中に埋め込んでくれるプラグインがあります。
Font Awesome Iconsプラグイン
上記ページに詳しく載ってますのでHTMLタグを直接入れたくない方はこちらのプラグインをどうぞ。
Font Awesome カスタマイズ
Font AwesomeはCSSで大小表示、色をつけたり回転させたりできます。以下に「Examples」があるのでただアイコンを表示させるだけではなくどんなことができるのか見てみましょう。
<i class="fa fa-refresh fa-spin fa-5x" style="color:red;"></i>
<i class="fa fa-spinner fa-pulse fa-5x" style="color:blue;"></i>
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
ワードプレスでこのままではアイコンを重ねることはできませんでしたが上記のように色をつけたり回転させたりサイズ変更したりすることはできました。
Font Awesome以外のアイコンWebフォント
Font Awesome以外にもたくさんのフォントアイコンがあって無料で使わせてくれるサイトもあります。
さらにそれを個別にCSSとかですぐに使えるようにするジェネレーターサイトもあって便利♪
フォントWebアイコン
こちら著作権フリーとそうじゃない場合があるようですので使用前に確認してくださいね。
フォントを生成するジェネレーター
まだたくさんあります。有料のもあったのでご注意ください。
そういうわけでFont Awesomeを便利に使わせていただきます。
コメント