FontAwesome5の使い方。おしゃれなアイコン絵文字フォントをかんたんに実装しよう!文字化け時の対処法も解説

オシャレなアイコンでサイトを豪華に彩るFontAwesome5
DESIGNER

ありきたりなグローバルメニュー、見慣れたサイドバー、文字だけが綴られた記事……。

このように、お馴染みのWebサイトを制作するのも大切ですが、あまりにも似通ったコンテンツだと読者の記憶に残りません。

そこで取り入れたいのが、アイコンフォントの「FontAwesome5」。これを使えば、オシャレで絵文字のようなテキストを簡単に実装できます。

さっそく、「FontAwesome5」の使い方や実装方法を見ていきましょう!

FontAwesome5とは?

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

FontAwesome5」とは、アイコンを文字として扱えるアイコンフォントの一種です。HTMLやCSSファイルに少しコードを書き加えるだけで、シンプルな文字だけが並ぶメニューへ目立つアイコンを加えられ、見た目が華やかになります。

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

さらに、無料で使い始められるのも大きなメリット。有料版も用意されていますが、個人が趣味で使うレベルなら無料版でも問題ありません。

FontAwesome5の使い方

「FontAwesome5」は以下の方法で導入できます。

  • 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という短い数字列のようなものを利用しています。

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

アイコンが文字化けしたときに確認したい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」の使い方と、それらアイコンフォントを使う上での注意点についてそれぞれご紹介しました。

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

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

(執筆:黒川シュン 編集:Workship MAGAZINE編集部)

いまの働き方に悩んでいるあなたへ。

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」

新しい働き方が加速するいまこそ、キャリアの選択肢を広げるフリーランス・複業・副業向けお仕事マッチングサービス『Workship(ワークシップ)がおすすめです。

  • 20,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 万一のトラブル時にも無料で賠償責任保険つき
  • お仕事成約でお祝い金1万円プレゼント!

登録から案件獲得まで、お金は一切かかりません。一度詳細をのぞいてみませんか?

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

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