WordPressサイトにWebアイコン【Font Awesome】を実装する方法
MENU
  1. HOME
  2. WEB制作
  3. WordPressサイトにWebアイコン【Font Awesome】を実装する方法

最近の作業実績

  • 2024年04月06日非レスポンシブのサイトをレスポンシブ化いたしました。
  • 2024年04月05日テーマファイルが編集できない不具合を解消いたしました。
  • 2024年04月04日WordPress、テーマ、プラグイン、のバージョンアップを担当いたしました。
  • 2024年04月03日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。
  • 2024年04月02日お問い合わせフォームを再構築いたしました。
  • 2024年04月01日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。
  • 2024年03月31日サーバー移管に共に表示されなくなったサイトを表示される状態まで復旧いたしました。
  • 2024年03月30日WordPressの操作方法をサポートいたしました。
  • 2024年03月29日サイドバーに人気記事を表示させる仕組みを導入いたしました。
  • 2024年03月28日テキスト等の簡易な修正を行いました。
  • 2024年03月27日アイキャッチが表示されない不具合を修正いたしました。
  • 2024年03月26日WordPressの操作方法をサポートさせていただきました。
  • 2024年03月25日サイト上で発生していたリンクの不具合を解消いたしました。
  • 2024年03月24日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。
  • 2024年03月23日WordPress、テーマ、プラグイン、のバージョンアップを担当いたしました。
  • 2024年03月22日WordPressにログインできない不具合を解消いたしました。
  • 2024年03月21日既存サイトにセキュリティ対策を導入いたしました。
  • 2024年03月20日メールフォーム周りで発生していた不具合を解消いたしました。
  • 2024年03月19日記事一覧をカテゴリー単位で表示できる様にカスタマイズいたしました。
  • 2024年03月18日WordPress、テーマ、プラグイン、のバージョンアップを担当いたしました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。

WordPressサイトにWebアイコン【Font Awesome】を実装する方法

この投稿は2019/02/18に加筆修正いたしました。

WordPressサイトにWebアイコン【Font Awesome】を実装する方法をご紹介します。WEBアイコンは簡単に使えて非常に便利。この機会に使い方をマスターしてください。初心者の方でも3分間でWEBアイコンの使い方をマスターすることができます。

この記事は約 6 分で読めます。

WordPressサイトにWEBアイコン【Font Awesome】を導入しよう

【Font Awesome】は、シンプルなデザインの様々アイコンをWebフォントという形式で利用できるようにしたサービスです。各種アイコンがWEBフォントとして利用することができますので、サイズやカラーなどをCSSだけで調整することができます。

WEBサイトを制作していてアイコンを使用したいとき、かなりお世話になるサービスです。
様々なアイコンが配布されていますので、ほしいアイコンがほとんど見つかります。

使い方も簡単ですので、今回のコンテンツを参考にして【Font Awesome】を使ってみてください。

【Font Awesome】を導入する手順

下準備

まず、サイト上に【Font Awesome】のアイコンが表示できるように下準備を行います。
この下準備をしておかなければ、後述する方法でアイコンを設置して正常に表示されません。

下準備の方法は2通りあります。

・必要なファイルをサーバーにアップロードする方法
・CDNを利用する方法

今回は、ファイルのダウンロードやアップロードの必要が無く、コピペだけで準備ができる「CDNを利用する方法」を中心に解説していきます。

やり方は簡単です。

WordPressの管理画面から、header.phpの編集画面を開きます。
管理画面のメニューから【外観】⇒【テーマの編集】⇒【header.php】と進んでください。

編集画面が開いたら【<head>】内に以下のコードをコピペして保存します。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

下準備はこれで完了です。

アイコンをサイト上に表示させる方法

下準備が整ったら、アイコンをサイト上に表示させて見ましょう。
こちらの作業も簡単で、基本的にコピペだけで作業が完了します。

まず、公式サイト【Font Awesome】にアクセスしてください。

上記画像の赤枠部分にある【Icons】をクリックします。

上記の画像の様に、使用できるアイコンがズラリと表示されます。
表示されているアイコンの中からお好きなアイコンを見つけてください。

アイコンを選ぶときは、1点だけ注意が必要です。
下記の2つのアイコンを見比べてください。

左側のアイコンは濃く表示され、右側のアイコンは薄く表示されています。
無料で利用できるアイコンは、左側の濃く表示されているアイコンです。

設置したいアイコンが見つかったら、そのアイコンをクリックします。

遷移したページの中を確認すると、HTMLコードが表示されているのが分ります。
上記の画像でいえば赤枠の部分です。

このHTMLコードをコピーしてください。
HTMLコードをクリックすると自動的にコピーできます。

あとは、サイト上のアイコンを設置したい箇所にコピーしたHTMLを貼り付ければOKです。
例えば、投稿内に設置したいのであれば、その投稿の編集画面から貼り付けてください。

下記の画像は試しにTwitterのアイコンを表示させてみました。

サイトを確認してみると、上記のようにアイコンが表示されているのが分かるかと思います。

いかがでしたでしょうか?
コピペだけで簡単でしたね。

WEBアイコンを装飾してみる

アイコンのサイズを変更する

アイコンを設置するHTMLにデフォルトで用意されているスタイルを追加する事で、アイコンのサイズを変更することができます。

<i class="fa fa-twitter fa-lg" aria-hidden="true"></i>fa-lgの場合
<i class="fa fa-twitter fa-2x" aria-hidden="true"></i>fa-2xの場合
<i class="fa fa-twitter fa-3x" aria-hidden="true"></i>fa-3xの場合
<i class="fa fa-twitter fa-4x" aria-hidden="true"></i>fa-4xの場合
<i class="fa fa-twitter fa-5x" aria-hidden="true"></i>fa-5xの場合

上記の様にclassに【fa-lg】【fa-2x】【fa-3x】【fa-4x】【fa-5x】を加えることで、以下のようにアイコンのサイズを変更することができます。

fa-lgの場合
fa-2xの場合
fa-3xの場合
fa-4xの場合
fa-5xの場合

アイコンの幅を変更する

アイコンは横幅が統一されているわけではありませんので、リストなどで複数のアイコンを使うとテキストの開始位置がずれ、ちぐはぐな感じになってしまいます。

ここにテキストが表示されます。
ここにテキストが表示されます。
ここにテキストが表示されます。

ちょっと分かりにくいかもしれませんが、よーく見るとテキストの開始位置がずれているのが分かりますね。

このずれを解消するためには、classに【fa-fw】を加えてやりましょう。

<i class="fab fa-twitter fa-fw"></i>ここにテキストが表示されます。
<i class="fas fa-archway fa-fw"></i>ここにテキストが表示されます。
<i class="fab fa-apple fa-fw"></i>ここにテキストが表示されます。

classに【fa-fw】を加えてやると、以下のようにテキストの開始位置がずれなくなります。

ここにテキストが表示されます。
ここにテキストが表示されます。
ここにテキストが表示されます。

アイコンを回転させる

classに【fa-spin】を追加することで、アイコンを回転させることができます。

<i class=”fab fa-twitter fa-spin”></i>ここにテキストが表示されます。
<i class=”fas fa-archway fa-spin”></i>ここにテキストが表示されます。
<i class=”fab fa-apple fa-spin”></i>ここにテキストが表示されます。

以下のようにアイコンが回転します。

ここにテキストが表示されます。
ここにテキストが表示されます。
ここにテキストが表示されます。

上記のアイコンを回転させても意味が分かりませんね。
以下の様なアイコンを回転させることで使い道があるかと思います。

ここにテキストが表示されます。

ボーダーでアイコンを囲ってみる

classに【fa-border】を追加することで、アイコンをボーダーで囲うこともできます。

<i class="fab fa-twitter fa-border"></i>ここにテキストが表示されます。
<i class="fas fa-archway fa-border"></i>ここにテキストが表示されます。
<i class="fab fa-apple fa-border"></i>ここにテキストが表示されます。

以下のようにアイコンをボーダーで囲めます。

ここにテキストが表示されます。
ここにテキストが表示されます。
ここにテキストが表示されます。

まとめ

WordPressサイトにWebアイコン【Font Awesome】を実装する方法をご紹介しました。

WEBアイコンはサイトの装飾などで利用する機会も多いかと思います。
【Font Awesome】は、コピペだけで簡単に実装できますので、ぜひ実装してみてください。

今回のコンテンツで分からないところがあれば、お問い合わせください。

Wordpressのカスタマイズや不具合など
何かお困りのことはありませんか?

Wordpressに関連するあなたのお悩み、解決いたします。
次のような方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトに不具合が発生したが、直し方が分からない。不具合の修正経験が豊富な人に任せたい。
  • 既存サイトにWordPressを導入したいが、やり方が複雑で自分ではできそうにもない。経験が豊富な人に任せたい。
  • WordPressがハッキングされたが修正の仕方が分からない。サイトを元通りにできる人を探している。
  • Wordpressで0からサイトを制作したいが、自分ではできそうにもない。プロにサイト制作を委託したい。

一つでも該当する方は、以下のフォームからお気軽にご相談下さい。

WordPressに関して今すぐ相談する

著者:takaya kondo

岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

コメントを残す

(必須)

CAPTCHA