読者です 読者をやめる 読者になる 読者になる

Webbiz

Webサイト制作やビジネス・デザインに関する備忘録的ブログです。

アイコンwebフォント「Font Awesome」が便利すぎて、楽しい!

webサイト上でアイコンを使いたいとき、みなさんはどんな方法で表現しますか?私はもっぱらアイコンwebフォントの「Font Awesome」を使用しています。

設置が簡単で楽しいので、アイコンを必要以上に使ってしまい、結果アイコンだらけの微妙なデザインになるという失敗を数多く経験しております。そしてそれは現在進行形です。今回は、そんな「Font Awesome」の基本的な使い方をご紹介します。

f:id:Webbiz:20151127225512p:plain

https://fortawesome.github.io/Font-Awesome/

1:必要ファイルを準備する

「Font Awesome」を使用する方法は、ファイルをダウンロード後、自分のサーバにアップロードして使用する方法とCDNを使用する方法の2とおりです。

ファイルをダウンロードして使用する場合

まずはトップページの「download」ボタンから必要データ一式をダウンロードします。

f:id:Webbiz:20151127232139p:plain

ダウンロードしたデータのうちフォントファイルとCSSファイルをそれぞれ任意のフォルダにコピーしてください。サイトのhead要素内には以下のコードを記述します。

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

※"path/to/font-awesome/"部分はサイトに合わせて変更してください。。

CDNを使用する場合

サイトのhead要素内に、以下のコードを記述

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

2:アイコンを表示させる

htmlファイルのアイコン表示させたい部分に記述を加えます。アイコンによってクラスが異なるので、「Font Awesome」のサイトからコピー&ペーストで持ってくるのが便利かと思います。

f:id:Webbiz:20151127232210p:plain

f:id:Webbiz:20151127233021p:plain

f:id:Webbiz:20151127232359p:plain

トップページ>icons>各アイコンページにコードが有ります。

3:カスタマイズ!

あとはCSSで色や大きさ・マージンなどをお好みに調整してください。

設置が簡単で楽しいですが、アイコンの使いすぎには十分ご注意ください。それでは、楽しいアイコンライフを。