こんにちは、本日もTravelPressにご訪問いただきありがとうございます。

前回の記事、「旅の情報発信はやっぱりブログ、WordPress（ワードプレス）の始め方を教えます」からWeb制作に関するカテゴリも作ったので、今後は旅・Webを中心に更新していきます。いろいろと方向性が定まらないブログですが、今後ともよろしくお願いします。

「Web制作」第二弾目となる今回はWebフォントに関すること。ブログのデザインをカスタマイズしてる時に「アイコンがあった方がビジュアル的に良いよなー」と感じたことがある人も多いはず。そういう時にオススメなのが、画像を使わずにWebフォントでアイコンを実装できる「Font Awesome」というサービス。

ブログやサイトなどでよく見かけるこういうのです。ほとんどのサイトは画像ではなくWebフォントで作られています。

そもそもWebフォントとは…

Webフォント
WebフォントはWWW上からフォントを表示する技術である。Webサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。またはWebサーバー上に置かれるフォント自体をWebフォントと指し、フォントをWebで利用するよう提供するサービスをWebフォントサービスとして区別する。
Wikipedia – http://ja.wikipedia.org/wiki/Webフォント

Web上にあるフォントを指定すれば自由に使うことができるため、他のサイトとは視覚的に一味違ったカスタマイズが可能になります。さらにWebフォントは、文字だけじゃなくアイコンでも使用できます。

Webフォントを扱っているサイトはいくつかありますが、今回はアイコンに特化したWebフォントサービス「Font Awesome」をご紹介します。

Font Awesomeの実装例

当ブログでもFont Awesomeのアイコンをいくつか使用しており、PC表示ではパンくずリストのホーム、タイトル下のSNSシェア数、記事左側の追従するシェアボタンはWebフォントを使っています。

スマホ表示ではタイトル上のSNSシェア数とフッターのホームボタン、SNSボタンでWebフォントを使用しています。

Font Awesomeでアイコン表示

使い方は簡単！コピペするだけで500個以上のアイコンを無料で使うことができます。まずはFont Awesomeのサイトにアクセスしてください。

Font Awesome

Font Awesomeの使い方

サイトにアクセスしたら、ナビゲーションメニューにある「Get Standard」のリンクをクリックします。

すると下の画像のようなページが表示されます。

Font Awesomeは、CDNサーバに置かれているので、画像の赤枠で囲んである部分をサイトの＜head＞＜/head＞内に書き込むだけでOKです。下のタグをそのままコピーして貼り付けても大丈夫。

アイコンを選ぶ

あとは好きなアイコンを選択してサイトの好きなところに貼り付けるだけです。ナビゲーションメニューにある「Icons」のリンクをクリックします。

すると、ズラーっとアイコンが表示されます。これが全部無料で使いたい放題！

今回は一番使うであろう家のマーク「Home」でカスタマイズの仕方を解説します。検索窓に「home」と入力し、アイコンが２個に絞り込まれるので左側をクリックします。

すると大きさが段々になったアイコンが表示され、下にHTMLに記入するタグが表示されます。

上の画像の赤枠で囲んだ部分を、アイコンを表示させたいところにコピーして貼り付けます。

「Home」の場合は下記のタグになります。

アイコンのカスタマイズ

表示したアイコンのカスタマイズ方法を説明します。フォントなので大きさや色を変えても表示が崩れないのが特長です。

大きさを変える

サイズを変更したい場合は、＜i class=”fa fa-flag ⚪︎⚪︎“＞＜/i＞の⚪︎⚪︎の部分にそれぞれ fa-lg , fa-2x , fa-3x , fa-4x , fa-5x を追加することで大きくなります。

それぞれのサイズは下の表を参考にしてください。

色を変える

style=”color:#ff0000;” を追加すれば色を赤色に変えることができます。

SNSの色を変えるときは下の表を参考にしてください。

アイコンを回す

fa-spin を追加するとアイコンを回すことができます。サンプルでUSドルを回していますが、決して僕の金回りが良いという意味ではございません。。。

まとめ

アイコンの数も豊富で、しかも導入も簡単にできる「Font Awesome」。普通のアイコンとして使うもよし。ぐるぐる回してオリジナリティーを出すもよし。いろいろな場面で活躍しそうです。

今後TravelPressでもカテゴリメニューなどにどんどん使っていきたいと思います。

追記：
さっそくh2の見出しタグに Font Awesome のアイコンを取り入れました。