そんな話を友人とする機会がありました。 「どんな手順でアイコン画像を作っているのか」という話題になり、いさろぐでも利用しているいわゆる「アイコンフォント」の話になりました。 「アイコンフォント」を使えば、あらかじめ用意されているアイコンを指定するだけで、カンタンに自分のサイトにアイコンを表示することができます。 そこで今回は、アイコンフォントとして広く知られている「Font Awesome」の設定方法を説明していきたいと思います。
Webサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。 またはWebサーバー上に置かれるフォント自体をWebフォントと指し、フォントをWebで利用するよう提供するサービスをWebフォントサービスとして区別する。上記はWikipediaからの引用ですが、このように「意図したフォントを表示させよう」ということが目的となります。
では、実際にWebフォントにはどんなフォントがあるのでしょうか。 2015年12月現在、数多くのWebフォントがあり全部はとても紹介できませんが、今回は「Google Fonts」を紹介しながら設定の仕方をざっくりみていきたいと思います。
その後はページの案内に従い、フォントのスタイルの詳細を選択していきます。
選択しすぎると読み込みで重たくなってしまうので、「Normal 400」と太字の設定もしたい場合は「Bold 700」あたりを選択しておくと無難かと思います。
ラテン文字、ギリシャ文字、キリル文字などの選択肢があるフォントもあります。 「Latin」しか用意されていないフォントも多いため、「Latin」をチェックしておけば問題ありません。
・「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);
・「css」に以下を追加して、フォントを利用する
h1 { font-family: 'Open Sans', sans-serif; }
上記の設定では「h1」タグのフォントが「Open Sans」で表示されるように記述しています。 設定自体は非常にカンタンなので、ぜひカスタマイズに挑戦してみてください!
さきほどの設定は「英数字」については表示されますが、「日本語」を扱うには「日本語フォント」を利用する必要があります。 ここでは「ふい字」を紹介しながら、フォント自体をサーバに設置するパターンをみていきたいと思います。 「ふい字」は手書きで可愛らしい日本語フォントです。 実はわたしがwebフォントをはじめて利用した際に使わせていただいた、お気に入りのフォントなんです。
アップロードする場所は任意で構いませんが、後からCSSで呼び出すので分かりやすいディレクトリにアップするといいかと思います。 今回は「ドメイン/font/HuiFont29.ttf」という形でアップすることにします。
@font-faceでフォントを呼び出す
@font-face{ font-family: 'huimoji'; url('/font/HuiFont29.ttf') format('truetype'); font-weight: normal; } h1 { font-family: 'huimoji'; }
こちらの文章は「ふい字」になっています! 実際にCSSで装飾しています。 ※InternetExplorerでは「ttf」でWebフォントが反映されません。
他のフォントの場合でも設定の流れは同様ですので、覚えてしまえばかなりカンタンだと思います。 「Google Fonts」の直接呼び出す場合と、「ふい字」のようにファイルをアップする場合と、両方覚えておけば問題なさそうです。 最近では日本語フォントは本当にたくさんあります。 最近公開されたコリスさんの以下の記事では網羅して紹介があり、非常に参考になります。2016年用、日本語のフリーフォント201種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
それでは実際に、Font Awesomeを使ってアイコンを表示させてみましょう!
Font Awesome, the iconic font and CSS toolkit
上記のURLは「Font Awesome」の公式サイトです。 「Get Started」のページに設定の方法が書いてありますが、カンタンにこちらでも説明していきたいと思います。
「Google Fonts」ではフォントを読み込んでいましたが、「Font Awesome」では設定用のCSSを直接読み込む形となります。 「Download」からフォント自体をダウンロード、「ふい字」で紹介したような設定方法にしても問題ありません。 その場合「font-awesome.min.css」と「fontawesome-webfont.ttf」などをサーバにアップしていく形になります。
●「head」内に以下を追加して、CSSを読み込み
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
これだけで「Font Awesome」を利用する準備はほとんど完了です。 あとは好きなアイコンを選んで、呼び出すだけになります。
<i class="fa fa-coffee"></i>
<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で調整ができてしまいます。 ただし1ページにアイコンフォントを設定しすぎると読み込みに時間がかかったり、サイトが多少重くなってしまうデメリットもありますので、カスタマイズをしていく中で設定の判断をしてください。
アイコンもまた、ウェブサイトを華やかにしてくれますし、何より「アイコン」があることで、どんな機能なのか、意図が伝わりやすいという大きなメリットがあると思います。 サイトに訪れたユーザーが直感的に意図を感じ取れるようになるのは、とてもやさしいサイト設計だと思いますので、ぜひアイコンフォントを取り入れてみてください。
This website uses cookies.