WPでアイコンWebフォントを手軽に使えるFont Awesomeを試す

アイコンWebフォントを使ってみる

アイコンをフォントとして使えるアイコンWebフォントはフォントなどでたくさんの利点があってなによりも気軽に使えます。

アイコンWebフォントでも代表的なのがFont Awesome。今まで文中などで必要なときにちょこっと使っただけだったので今回は本格的に導入してみます。

WS000003

Font Awesomeの利点

Font AwesomeはWebフォントで使うのでCSSで色やサイズを手軽に好きなように変えることができます。普通のアイコンだと色を変えるだけでも大変で、小さいサイズだったらいいけど大きいサイズに変更するのは不可能に近い場合もありますよね。

Font Awesomeはそんな苦労をすることなく手軽に使えちゃうんです。

こいうのがあるとデザイナー系ではない自分には好都合♪ アイコンなんてデザインできないし作ってもよいのができそうにないので(^_^;)

ただし、デザイナーさんには物足りないかもしれないがデザイナーさんでも適材適所で使ってる人が多数いるのでちょっとした字間などに入れたりポイントとしてリンクの前に入れたりするのには非常に便利です。

Font Awesomeのサイトを見てみる

Font Awesome, the iconic font and CSS framework

Font Awesomeのフォントアイコンを使えるようになるには最初にCSSなど設定をしなければ使えるようにならないのですが、ワードプレスですとプラグインを入れるだけで使えるようになります。

とりあえずはFont Awesomeのサイトをみてどんなフォントアイコンが使えるかチェックしてみましょう。

Font Awesome, the iconic font and CSS framework

なお、プラグインも入れたくない方はCSSを直接よみこめば使えるようになります。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

CSSはいろいろありますので気に入ったを読み込んでください。

Font Awesome, the iconic font and CSS framework

WPプラグインFont Awesome 4 Menusインストール

Font Awesome 4 Menusはワードプレスの「外観」>「メニュー」にあるリンクの前にアイコンをつけてくれるプラグインです。

これを入れたらFont Awesomeのタグでどこでもアイコンを表示できるようになります。

Font Awesome 4 Menusで検索すると出てきます。

Font Awesome 4 Menusで検索すると出てきます。

まずはこちらをインストールしてみましょう。

設定>Font Awesome に設定するページがあります。

設定>Font Awesome に設定するページがあります。

こちらで設定できますが特に変更することなくデフォルトで使えてます。

メニューにアイコンを表示させてみる

では早速トップにあるメニューのリンクの前にアイコンを表示させてみます。

ws000004

Font Awesomeのアイコンのページから使いたいアイコンの名前を調べます。

ws0000012

外観>メニューの右上にある「表示をプション」をクリックして「CSSクラス」をチェックします

ws000005

CSS classが表示されるので先ほどのアイコンの名前を記入

ws000006

このように表示されます。

うまくいきました♪少し見た目も良くなった気がします。

本文中にアイコンを表示させる

本文中にHTMLタグを入れる場合はワードプレスではちょっとコツというか勝手に消されちゃう場合がある(汗)ので注意が必要です。

<i class="fa fa-home"></i>←「テキスト」表示にさせて通常はこのタグを入れますがこのままだと消えちゃいます(汗)

<i class="fa fa-home"></i> ホーム←このようにタグの後ろになにか文字か全角スペース(半角スペースだと消えます)が無いと消えちゃうのです。

 ホーム

<i class="fa fa-home"></i> ←文字を表示させたくない場合は全角スペースをタグの後ろに追加すれば消えません。

 

タグを直接挿入するのはちょっとメンドウですがたまにしか使わない場合はこれで良いのかもしれません。

HTMLタグを直接いれずにプラグインで簡単にアイコンを挿入したい

この場合はプラグインを入れるとワードプレスのエディターの上のボタンが並んでるところに「Icons」ボタンを表示させて好きなアイコンを選ぶだけで本文中に埋め込んでくれるプラグインがあります。

Font Awesome Iconsプラグイン

Font Awesomeは、手軽に使えるウェブアイコンフォントとして利用されており、このブログのテーマでも利用しています。 で、このFont Awesomeは、ブログの記事中にも使用できるのですが、通常の利用方法で使用するには以下の手

上記ページに詳しく載ってますのでHTMLタグを直接入れたくない方はこちらのプラグインをどうぞ。

Font Awesome カスタマイズ

Font AwesomeはCSSで大小表示、色をつけたり回転させたりできます。以下に「Examples」があるのでただアイコンを表示させるだけではなくどんなことができるのか見てみましょう。

Font Awesome, the iconic font and CSS framework

<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アイコン

Entypo is a suite of 411 carefully crafted premium pictograms by Daniel Bruce.
IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect ico...
A freshly updated icon font set that you can use with CSS on your next Foundation project.

こちら著作権フリーとそうじゃない場合があるようですので使用前に確認してくださいね。

フォントを生成するジェネレーター

Using IcoMoon you can easily search and download vector icons or generate fonts (icon fonts). This tool can also be used for icon set management. It can generat...
Tool to build custom fonts with icons.

[https://pictonic.co/]

まだたくさんあります。有料のもあったのでご注意ください。

そういうわけでFont Awesomeを便利に使わせていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする