今回は視認性に優れたアイコンを簡単に導入することができるFontAwsomeの使い方を解説します。設定すると、上の画面のようなアイコンが利用できるようになりますよ。
サイトのメニューバーや見出しなど、テキストの横にアイコンを設置することで内容が一目で分かるようなコンテンツを作成することができます。
FontAwsomeを使うまでの大まかな流れは以下の3ステップになります。
- FontAwsome導入の初期設定
- 使いたいフォントを選択
- コンテンツに設置&装飾
非常に簡単に設定可能なので是非活用してみてください。
細かい部分のデザインをよりよくしたい方は、CSSで吹き出しデザインを簡単に実装する方法とAmazonアフィリエイトなどへのリンク作成ツール「カエレバ」の使い方も参照ください。
FontAwsomeとは
FontAwsomeとはWeb上で頻繁に使われているアイコンを「アイコンフォント」という形式で使うことができるサービスです。フォント=文字として認識させることができるので、拡大や縮小カラーの変更なども自由にできるのが特徴です。
商用利用にも対応しているので、どのようなサイトでも使うことができます。テキストとは違い、一目で何を説明しているのかが分かるアイコンを使うことでメニュー表示などが飛躍的に分かりやすくなります。
FontAwsomeの導入方法
自分のサーバーに設置する
まず公式サイトよりFontAwsomeをダウンロードします。
公式サイトのトップページにある「Download」をクリックしてください。
ダウンロードしたZIPファイルをダブルクリックして解凍します。
解凍したファイルはFTPツールを使ってサーバーにアップロードします。ここでは「fontフォルダ」と「font-awesome.min.css」を使います。
「fontフォルダ」はプロジェクトも真下に設置して「font-awesome.min.css」はプロジェクトのCSSフォルダの中に設置してください。
ファイルのアップロードが完了したらプロジェクトのHTMLファイルのhead要素にFontAwsomeを読み込ませるための記述を追加します。
<link href="css/font-awesome.min.css" rel="stylesheet">
ワードプレスの場合は「外観」→「テーマの編集」→「header.php」のhead要素内に記述します。
これでサーバーにファイルをアップロードする場合の使用準備が完了しました。
CDNサーバーを使う
CDNを使う場合は以下のコードをコピーしてHTMLのhead内に貼り付けますが、バージョンアップしているかもしれないのでBootstrapCDNから最新のコードを確認しておいた方が間違いがないかと思います。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
コードの入力が完了したら保存して完了です。
FontAwsomeでアイコンを作る方法
ここからは実際にFontAwsomeをコンテンツ内で表示させる方法を解説していきます。
まず公式サイトのトップページ上部にある「Icon」をクリックします。
アイコン一覧が表示されるので好きなアイコンを選択します。
アイコンの詳細画面が表示されました。
FontAwsomeを表示させる方法は２種類あります。ここからはHTMLで表示させる方法とCSSを活用して表示させる方法を解説します。
htmlで指定する方法
アイコン詳細画面を下にスクロールすると<i class〜></i>というコードが表示されているので、こちらを全てコピーします。
コピーしたコードをコンテンツ内の好きな場所に貼り付けます。ワードプレスの場合はエディタのモードをテキストモードにして貼り付けてください。
プレビューを確認してみるとしっかりとアイコンが表示されていることが分かります。
CSSで指定する方法
CSSでアイコンを指定する場合はUnicodeを使用します。
アイコンの選択画面にあるUnicodeをコピーします。
次にテキストエディタにHTMLでタグを設定していきます。
<p>これは<span class="bath">お風呂</span>です。</p>
spanタグの””内の名前は自分の分かりやすいものでOKです。
テキストエディタへ入力が完了したらCSSを設定します。spanタグで指定したbathというクラスを指定してcontentに先ほどコピーしたUnicodeを貼り付けます。
すると以下のように画像が反映されます。これで設定は完了です。CSSコードのテンプレートは以下のようになります。
クラス名:before { font-family: FontAwesome; content: '\Unicode'; }
FontAwsomeを装飾する
サイズを変える
<p><i class="fa fa-cog fa-lg"></i></p>
サイズを変えたい場合は以下のように記述することでサイズを変更することができます。
- 1.33倍：fa-lg
- 2倍：fa-2x
- 3倍：fa-3x
- 4倍：fa-4x
- 5倍：fa-5x
これで下画像のようにサイズを変更することができます。
色を変える
色を変更したい場合はHTMLのiタグに任意のクラス名を追加してCSSで個別に指定できるようにします。
<i class="fa fa-tasks クラス名"></i>
ここで入力したクラス名をCSSで指定してcolorを指定すればアイコンの色を変更することができます。CSSの記述は以下のように設定します。
.クラス名 {color: 色}
回転させる
アイコンを回転させたい時はiタグにfa-spinというクラス名を追加するだけで完了します。
<i class="fa fa-heart-o fa-spin"></i>
角度を変える
FontAwsomeではアイコンを90、180、270度の角度に指定することができます。
こちらもiタグにfa-rotate-90、fa-rotate-180、fa-rotate-270のクラスを追加することで反映させることができます。
<i class="fa fa-flask fa-rotate-270"></i>
アニメーションをつける
回転の動きに角ばった動きを追加してアニメーション効果を持たせることも可能です。
この場合はfa-pulseというクラス名をiタグに追加することで反映させることができます。
<i class="fa fa-life-ring fa-pulse"></i>
アニメーションは画像ではわかりづらいので実際にこの下にコードを書いてみました。
:Ring
細部のデザインについては、CSSで吹き出しデザインを簡単に実装する方法とAmazonアフィリエイトなどへのリンク作成ツール「カエレバ」の使い方も参照ください。
まとめ
今回はFontAwsomeの使い方について解説しました。
フォントという特徴を活かして拡大してもボヤケない仕様や色の変更や回転など装飾も通常のテキストのように簡単に行うことができるのはFontAwsomeのメリットと言えるでしょう。
無料ですぐに導入することができますので、これを使わない手はないですね。