「FontAwesome5」でテキストに絵文字のようなアイコンフォントを追加する

ある程度の型に則ってWebサイトをコーディングしていると、サイトのビジュアルに味気なさを感じることはありませんか?ありきたりなグローバルメニュー、見慣れたサイドバー、文字だけが綴られた記事など。セオリーに則ったモノを作るのは制作においてもっとも重要ですが、あまりにも定型的なコンテンツだと読者の記憶に残りません。

そこで取り入れたいのが、オシャレなアイコンフォントである「FontAwesome5」です。これを使うことで、テキストに絵文字のようなアイコンフォントを追加できます。

味気ないデザインを華やかに変える!FontAwesome5とは?

味気ないデザインを華やかに変える!FontAwesome5とは?

FontAwesome5」とは、アイコンを文字として扱うことができるアイコンフォントの一種です。HTMLやCSSファイルに少しコードを書き加えるだけで、シンプルな文字だけが並ぶメニューへある種の記号を入れることができ、メニューを華やかに仕上げます。

また「FontAwesome5」は、アイコンフォントという扱いになっており、素材の用意もいっさい不要。自前で用意する必要がある写真画像とは異なり、ファイルを読み込むだけで誰でも簡単に利用できます。

FontAwesome5の使い方

「FontAwesome5」には以下の2パターンの利用方法が存在します。

  • CDNサービスを介して利用する方法
  • 直接ファイルを公式サイトからダウンロードして使う方法

今回は、中でも扱いが容易な「CDNサービスを介して利用する方法」をもとに「FontAwesome5」の使い方をご紹介します。

How to Use

使い方は簡単。まずはFontAwesome5の公式サイトへジャンプして、上部の「How to Use」というメニューをクリック。

長い一行をコピペ

すると「Use Font Awesome’s Free CDN」の欄にコードが記述されているので、それをコピーします。

headタグに入れる

次にFontAwesome5の機能を取り入れたいサイトのHTMLファイルまたはPHPファイルの<head>タグ内に挿入・保存して下準備は完了です。次はサイトへ実装していきます。

FontAwesome5の実装方法

iconをクリック

実装もいたって簡単。「FontAwesome5」の公式サイトの「icon」欄にある好きなアイコンを選び、そこで発行されるコードを貼り付けたいファイル箇所にコピー&ペーストするだけ。たったこれだけで種類豊富なアイコンフォントが実装できます。

なお、FontAwesome5には以下の2パターンの実装方法が存在します。

  • HTMLファイルまたはPHPファイルに直接<i class>で始まるclassタグを記述する方法
  • CSSファイルの擬似要素に記述して実装する方法

HTMLやPHPファイルで使う場合とCSSファイルで使う場合で使い方が異なる

使う部分の違いは上記の通り。HTMLファイルやPHPファイルを使う方法では長いコードを使っているのに対し、CSSファイルを使う方法ではUnicodeという短い数字列のようなものを利用しています。

読み込み方に違いはありますが、いずれも簡単に実装できます。

FontAwesome5のアイコンが文字化けしたときに確認したい3つのポイント

アイコンの読み込み方によっては、オプションとなるCSSを追加で記述しなければ文字化けを起こしてしまうものも……。そこでここでは、FontAwesome5を実装して文字化けを起こしてしまった時に確認したい3つの項目をご紹介します。

1. ファイルのパス設定

ファイルのパス設定をチェック

まず最初に確認したいのが、「ファイルのパス設定」です。そもそも読み込んでいるファイルが間違っているのではないか?また読み込むファイルが足りていないかどうかも確認しましょう。

とくに「FontAwesome5」には、JavaScriptをベースにした動くアイコンもあります。読み込むファイルは分けられていますが、動かないアイコンがすべてCSSファイルだけで機能するとは限りません。場合によってはアニメーションが機能しないアイコンでもJavaScriptファイルが必要になる場合もあります。

そのためもしCSSファイルだけを読み込んで動かない場合は、JavaScriptファイルも合わせて読み込むようカスタマイズし直してみましょう。

2. font-weightの太さ設定

font-weightの太さ設定

次に確認したいのが、フォントの太さを指定する「font-weight」の設定です。これはすべてのアイコンに当てはまるわけではないようですが、モノによっては「font-weight」で太さを指定しなければ表示そのものが出来ないものもあります。使うアイコンによってはCSS欄に記述する必要があるでしょう。

3. font-family名の設定

font-family名の設定

最後に確認したいのが「font-family名」の設定です。FontAwesome5には無料版に加えて、有料プランに加入することで使えるアイコンフォントも用意されています。そしてそのPro独自で使えるアイコンはfont-family名が異なるので、使う際には注意が必要です。

また無料版の中でも、TwitterやFacebookといった既存サービスのブランドを利用したアイコンはfont-family名が異なります。SNSシェアボタンをコーディングする際は、こちらもあわせて注意しておきましょう。

おわりに

今回は「FontAwesome5」の使い方と、それらアイコンフォントを使う上での注意点についてそれぞれご紹介しました。

既存の型が備わっているフレームワークを利用してコーディングしたはいいものの、文字だけでは物足りないと感じるときに。雰囲気作りの一環として使うと、仕上がりのデザインが華やかになります。

少しでも見映えを整えたいという方は、ぜひ合わせて利用してみてください。

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ