アイコンフォントをカンタンに設定！【Font Awesome】の使い方

アイコンの画像をいちいち作るのは面倒だなぁ

そんな話を友人とする機会がありました。「どんな手順でアイコン画像を作っているのか」という話題になり、いさろぐでも利用しているいわゆる「アイコンフォント」の話になりました。「アイコンフォント」を使えば、あらかじめ用意されているアイコンを指定するだけで、カンタンに自分のサイトにアイコンを表示することができます。そこで今回は、アイコンフォントとして広く知られている「Font Awesome」の設定方法を説明していきたいと思います。

今回の記事の目的

Webフォントを少しおさらい
「Font Awesome」を使ってみよう

ブログやサイトのテキストにはいわゆる「フォント」を指定しているかと思います。「メイリオ」や「MS Pゴシック」などは一般的で、よく聞くフォントの名前ですよね。いさろぐでは「游ゴシック体」をはじめに指定しています。実はこの「フォント」は閲覧しているユーザーのPCに入っていないと、サイト上で表現することができません。そこで、登場したのが「Webフォント」。「Webフォント」を利用することで、どのユーザーにも指定したテキストを表示することが可能になりました。今回はこのWebフォント、アイコンフォントについて書いていきたいと思います！

まずはWebフォントをおさらい

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

上記はWikipediaからの引用ですが、このように「意図したフォントを表示させよう」ということが目的となります。

では、実際にWebフォントにはどんなフォントがあるのでしょうか。 2015年12月現在、数多くのWebフォントがあり全部はとても紹介できませんが、今回は「Google Fonts」を紹介しながら設定の仕方をざっくりみていきたいと思います。

「Google Fonts」を使ってみよう

Webフォントには有償・無料のものや商用利用の可否などの種別も様々です。商用利用が可能で、無料のWebフォントサービス「Google Fonts」が分かりやすくて初めての場合も使いやすいと思います。

Google Fonts

設定の方法も非常にカンタンで、気に入ったフォントが見つかったら「Quick Use」のアイコンをクリックして次のページに進みます。

その後はページの案内に従い、フォントのスタイルの詳細を選択していきます。

「1」フォントのウェイトを選択

選択しすぎると読み込みで重たくなってしまうので、「Normal 400」と太字の設定もしたい場合は「Bold 700」あたりを選択しておくと無難かと思います。

「2」文字の種類を選択

ラテン文字、ギリシャ文字、キリル文字などの選択肢があるフォントもあります。「Latin」しか用意されていないフォントも多いため、「Latin」をチェックしておけば問題ありません。

「3」表示させるためのコードを確認

実際にHTML、CSSに追加するコードが表示されるので、コピー＆ペーストで設定が完了します。タブの切り替えで、HTMLコードでフォントを読み込む場合と、CSSに追記して読み込む場合と選択が可能です。 Javascriptで読み込むこともできますが、ここではHTMLかCSSのどちらかの記述方法で問題ないと思います。

・「head」内に以下を追加して、Google Fontsにアクセス

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

・「css」でフォントを呼び出す場合

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

「4」フォントを使うためのCSSの記述方法

・「css」に以下を追加して、フォントを利用する

h1 {
font-family: 'Open Sans', sans-serif;
}

上記の設定では「h1」タグのフォントが「Open Sans」で表示されるように記述しています。設定自体は非常にカンタンなので、ぜひカスタマイズに挑戦してみてください！

日本語のフォントを使ってみよう

さきほどの設定は「英数字」については表示されますが、「日本語」を扱うには「日本語フォント」を利用する必要があります。ここでは「ふい字」を紹介しながら、フォント自体をサーバに設置するパターンをみていきたいと思います。「ふい字」は手書きで可愛らしい日本語フォントです。実はわたしがwebフォントをはじめて利用した際に使わせていただいた、お気に入りのフォントなんです。

ふい字置き場。

今回はフォントのファイルをダウンロードし、自分のサーバにアップする必要があります。

説明では「ふい字　v2.9」をダウンロードしました。解凍したファイルには「HuiFont29.ttf」がありますので、こちらをサーバにアップしてきます。

アップロードする場所は任意で構いませんが、後からCSSで呼び出すので分かりやすいディレクトリにアップするといいかと思います。今回は「ドメイン/font/HuiFont29.ttf」という形でアップすることにします。

「CSS」でアップしたフォントを読み込む

@font-faceでフォントを呼び出す

@font-face{ 
	font-family: 'huimoji';
	url('/font/HuiFont29.ttf') format('truetype');
	font-weight: normal;
}
h1 {
	font-family: 'huimoji';
}

1行目でフォントの名前を「huimoji」としてみました。 2行目でフォントの場所を指定しています、先ほどアップしたパスを入力します。 ※ご自身のサイトの構成にあわせてパスを変更してください。さらに「h1」をふい字にする指定をCSSでおこない設定完了です。

こちらの文章は「ふい字」になっています！実際にCSSで装飾しています。 ※InternetExplorerでは「ttf」でWebフォントが反映されません。

他のフォントの場合でも設定の流れは同様ですので、覚えてしまえばかなりカンタンだと思います。「Google Fonts」の直接呼び出す場合と、「ふい字」のようにファイルをアップする場合と、両方覚えておけば問題なさそうです。最近では日本語フォントは本当にたくさんあります。最近公開されたコリスさんの以下の記事では網羅して紹介があり、非常に参考になります。

2016年用、日本語のフリーフォント201種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記

「Font Awesome」をつかってみよう

Font Awesomeを紹介する内容でここまでWebフォントについて書いてきましたが、それは「Font Awesome」がWebフォントと同じ要領で「アイコン」を表示させることができるからなんです。 ※表示の仕方自体は同じではありませんが、大きな意味で同じ要領、としています。そのため、Webフォントの表示の設定を知っておけば、Font Awesomeの設定はかなりスムーズになります。

それでは実際に、Font Awesomeを使ってアイコンを表示させてみましょう！

「Font Awesome」の設定

Font Awesome, the iconic font and CSS toolkit

上記のURLは「Font Awesome」の公式サイトです。「Get Started」のページに設定の方法が書いてありますが、カンタンにこちらでも説明していきたいと思います。

「Font Awesome」のCSSを読み込む

「Google Fonts」ではフォントを読み込んでいましたが、「Font Awesome」では設定用のCSSを直接読み込む形となります。「Download」からフォント自体をダウンロード、「ふい字」で紹介したような設定方法にしても問題ありません。その場合「font-awesome.min.css」と「fontawesome-webfont.ttf」などをサーバにアップしていく形になります。

いさろぐでは「CSS」を直接読み込む方法で「Font Awesome」を利用しています。

●「head」内に以下を追加して、CSSを読み込み

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

これだけで「Font Awesome」を利用する準備はほとんど完了です。あとは好きなアイコンを選んで、呼び出すだけになります。

アイコンを選んで設定する

アイコンは以下のページで一覧になっています。

The Icons

例えば、コーヒーのアイコンを利用した場合、リストのコーヒーアイコンをクリックします。

使い方のコードとして以下が掲載されています。

<i class="fa fa-coffee"></i>

HTMLを記述する要領で、表示させたい箇所にこちらのコードを貼り付けます。このコードを貼り付けるだけで完了です。 ← こんな感じです！また、詳細な使い方は「examples」をクリックすると確認できます。

Font Awesome Examples

ただアイコンを表示させるだけでなく、CSSに装飾も用意されているので、こちらのサンプルページを参考にすることで幅広い演出が可能になります。

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

上記にアイコンは「fa-spin」クラスで動きをつけることもできるので、これからのアイコンを利用する際には検討してみるのも面白いですね！

フォントだから装飾がカンタン

アイコンフォントの大きなメリットは、「フォント」だという点です。見た目はアイコンですが、フォントなのでCSSで色やサイズなどを文字として扱うことが可能なんです。

画像のアイコンだとどうしても作り直しが出てしまうところを、アイコンフォントであればCSSで調整ができてしまいます。ただし1ページにアイコンフォントを設定しすぎると読み込みに時間がかかったり、サイトが多少重くなってしまうデメリットもありますので、カスタマイズをしていく中で設定の判断をしてください。

まとめ

いかがでしたか？ Webフォントの技術は最近はじまったものではありませんが、今後も進歩し新しい試みがでてきそうなジャンルだと思います。特にデザインにおいて「フォント」は非常に重要な表現方法だと思います。フォントを変えるだけでサイト全体の印象が大きく変わってくることも少なくありません。これまではそういったデザインのフォントを「画像」として作っていましたが、「Webフォント」の登場から少しずつ変わってきています。まだまだ種類が多い訳ではありませんが、「モリサワ」のWebフォントがはじまったりと、有名なフォントもWebフォント化が進んでいます。そして、「アイコンフォント」も注目され、さまざまなサイトで目にすることが多くなったと思います。今回の記事ではその代表格の「Font Awesome」を紹介しました。もちろん「Font Awesome」以外にも多くのサービスがあり、自分でアイコンを作成することまで可能なサービスもあります。少し難易度の高いカスタマイズになりますが、今後いさろぐでもこの辺りのカスタマイズを取り上げたいと思います。

アイコンもまた、ウェブサイトを華やかにしてくれますし、何より「アイコン」があることで、どんな機能なのか、意図が伝わりやすいという大きなメリットがあると思います。サイトに訪れたユーザーが直感的に意図を感じ取れるようになるのは、とてもやさしいサイト設計だと思いますので、ぜひアイコンフォントを取り入れてみてください。