WordPressの使い方・Tips発信サイト

Webfontで簡単にアイコンが作れる!FontAwesomeの使い方

fontawesome icon

今回は視認性に優れたアイコンを簡単に導入することができるFontAwsomeの使い方を解説します。設定すると、上の画面のようなアイコンが利用できるようになりますよ。

サイトのメニューバーや見出しなど、テキストの横にアイコンを設置することで内容が一目で分かるようなコンテンツを作成することができます。

FontAwsomeを使うまでの大まかな流れは以下の3ステップになります。

  • FontAwsome導入の初期設定
  • 使いたいフォントを選択
  • コンテンツに設置&装飾

非常に簡単に設定可能なので是非活用してみてください。

細かい部分のデザインをよりよくしたい方は、CSSで吹き出しデザインを簡単に実装する方法Amazonアフィリエイトなどへのリンク作成ツール「カエレバ」の使い方も参照ください。

FontAwsomeとは

fontawesome toppage

FontAwsomeとはWeb上で頻繁に使われているアイコンを「アイコンフォント」という形式で使うことができるサービスです。フォント=文字として認識させることができるので、拡大や縮小カラーの変更なども自由にできるのが特徴です。

商用利用にも対応しているので、どのようなサイトでも使うことができます。テキストとは違い、一目で何を説明しているのかが分かるアイコンを使うことでメニュー表示などが飛躍的に分かりやすくなります。

fontawesome アイコン例

FontAwsomeの導入方法

自分のサーバーに設置する

まず公式サイトよりFontAwsomeをダウンロードします。
公式サイトのトップページにある「Download」をクリックしてください。

Downloadをクリック

ダウンロードしたZIPファイルをダブルクリックして解凍します。

ファイルを解凍する

解凍したファイルはFTPツールを使ってサーバーにアップロードします。ここでは「fontフォルダ」と「font-awesome.min.css」を使います。

「fontフォルダ」はプロジェクトも真下に設置して「font-awesome.min.css」はプロジェクトのCSSフォルダの中に設置してください。

font-awesome.min.css

ファイルのアップロードが完了したらプロジェクトのHTMLファイルのhead要素にFontAwsomeを読み込ませるための記述を追加します。

ワードプレスの場合は「外観」→「テーマの編集」→「header.php」のhead要素内に記述します。

wordpress header.php コードを貼り付け

これでサーバーにファイルをアップロードする場合の使用準備が完了しました。

CDNサーバーを使う

CDNを使う場合は以下のコードをコピーしてHTMLのhead内に貼り付けますが、バージョンアップしているかもしれないのでBootstrapCDNから最新のコードを確認しておいた方が間違いがないかと思います。

コードの入力が完了したら保存して完了です。

FontAwsomeでアイコンを作る方法

ここからは実際にFontAwsomeをコンテンツ内で表示させる方法を解説していきます。
まず公式サイトのトップページ上部にある「Icon」をクリックします。

Iconをクリック

アイコン一覧が表示されるので好きなアイコンを選択します。

アイコンを選択

アイコンの詳細画面が表示されました。

詳細画面 アイコン確認

FontAwsomeを表示させる方法は2種類あります。ここからはHTMLで表示させる方法とCSSを活用して表示させる方法を解説します。

htmlで指定する方法

アイコン詳細画面を下にスクロールすると<i class〜></i>というコードが表示されているので、こちらを全てコピーします。

コードをコピー

コピーしたコードをコンテンツ内の好きな場所に貼り付けます。ワードプレスの場合はエディタのモードをテキストモードにして貼り付けてください。

テキストモード

プレビューを確認してみるとしっかりとアイコンが表示されていることが分かります。

プレビュー

CSSで指定する方法

CSSでアイコンを指定する場合はUnicodeを使用します。
アイコンの選択画面にあるUnicodeをコピーします。

Unicodeをコピー

次にテキストエディタにHTMLでタグを設定していきます。

spanタグの””内の名前は自分の分かりやすいものでOKです。

テキストエディタへ入力が完了したらCSSを設定します。spanタグで指定したbathというクラスを指定してcontentに先ほどコピーしたUnicodeを貼り付けます。

すると以下のように画像が反映されます。これで設定は完了です。CSSコードのテンプレートは以下のようになります。

お風呂のアイコン 確認

FontAwsomeを装飾する

サイズを変える

サイズを変えたい場合は以下のように記述することでサイズを変更することができます。

  •  1.33倍:fa-lg
  •  2倍:fa-2x
  •  3倍:fa-3x
  •  4倍:fa-4x
  •  5倍:fa-5x

これで下画像のようにサイズを変更することができます。

サイズ変更 サンプル

色を変える

色を変更したい場合はHTMLのiタグに任意のクラス名を追加してCSSで個別に指定できるようにします。

ここで入力したクラス名をCSSで指定してcolorを指定すればアイコンの色を変更することができます。CSSの記述は以下のように設定します。

CSSを記述

回転させる

アイコンを回転させたい時はiタグにfa-spinというクラス名を追加するだけで完了します。

回転したハート

角度を変える

FontAwsomeではアイコンを90、180、270度の角度に指定することができます。
こちらもiタグにfa-rotate-90、fa-rotate-180、fa-rotate-270のクラスを追加することで反映させることができます。

角度を変えたグラス

アニメーションをつける

回転の動きに角ばった動きを追加してアニメーション効果を持たせることも可能です。
この場合はfa-pulseというクラス名をiタグに追加することで反映させることができます。

アニメーションは画像ではわかりづらいので実際にこの下にコードを書いてみました。

:Ring

 

細部のデザインについては、CSSで吹き出しデザインを簡単に実装する方法Amazonアフィリエイトなどへのリンク作成ツール「カエレバ」の使い方も参照ください。

まとめ

今回はFontAwsomeの使い方について解説しました。

フォントという特徴を活かして拡大してもボヤケない仕様や色の変更や回転など装飾も通常のテキストのように簡単に行うことができるのはFontAwsomeのメリットと言えるでしょう。

無料ですぐに導入することができますので、これを使わない手はないですね。