WordPressサイトにWebアイコン【Font Awesome】を実装する方法
  • WordPressサイトにWebアイコン【Font Awesome】を実装する方法
  • 記事公開:2017/07/03
  • 最終更新:2017/07/27

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

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

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

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="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

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

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

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

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

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

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

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

遷移したページの中を確認すると、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="fa fa-twitter fa-fw" aria-hidden="true"></i>ここにテキストが表示されます。
<i class="fa fa-rss fa-fw" aria-hidden="true"></i>ここにテキストが表示されます。
<i class="fa fa-cloud fa-fw" aria-hidden="true"></i>ここにテキストが表示されます。

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

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

アイコンを回転させる

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

<i class="fa fa-twitter fa-spin" aria-hidden="true"></i>ここにテキストが表示されます。
<i class="fa fa-rss fa-spin" aria-hidden="true"></i>ここにテキストが表示されます。
<i class="fa fa-cloud fa-spin" aria-hidden="true"></i>ここにテキストが表示されます。

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

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

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

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

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

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

<i class="fa fa-twitter fa-border" aria-hidden="true"></i>ここにテキストが表示されます。
<i class="fa fa-rss fa-border" aria-hidden="true"></i>ここにテキストが表示されます。
<i class="fa fa-cloud fa-border" aria-hidden="true"></i>ここにテキストが表示されます。

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

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

まとめ

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

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

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

この記事が気に入ったら【いいね】しよう!

あなたのWEBサイトをWordpressで
管理できるようにしませんか?

あなたのWEBサイトを見た目そのままでWordpress化いたします。
以下に興味のある方は、お気軽にご相談下さい。

  • あなたのWEBサイトを、Wordpressで運営できる様にいたします。ページの編集や追加も簡単に行えるようになります。
  • どの様な形式のサイト(例えば、アメブロ、MTサイトなど)でもWordPress化いたします。
  • Wordpress化でサイトのデザインが崩れるなどの心配は必要ありません。デザインもサイト構成もほぼ変わらない、高い再現率が自慢です。
  • 単にWordpress化するだけではありません。デザイン変更など+αの作業にも対応することも可能です。
  • 他案件との兼ね合いもありますが、最短即日であなたのサイトをWordpress化いたします。
  • 初心者でもWordpressが使えるよう、納品後に徹底的な操作サポートをご提供いたします。Wordpress化したけど操作できないと、あなたが頭を抱えることはありません。

興味のある方は、以下のリンクからチェックしてみてください。

詳細を確認する

著者:とあるWEBディレクター

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に7年間ほど活動させていただいています。

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

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

  • 2015-11-21

    チェックボックスを一括でチェックor解除する方法

    チェックボックスを一括でチェックor解除する方法をご紹介します。簡単な記述だけで一括チェックと解除を実装することができます。気になった方は2分間だけこのコンテンツを見てください。 記事を読む

  • 2017-07-22

    【レスポンシブサイト】デバイスの横幅で画像を切り替える方法

    サイトにアクセスしたデバイスの横幅で画像を切り替える方法をご紹介します。レスポンシブサイトで、PCとスマホで違う画像を表示させたい場合などに使えます。5分程度で実装できますので、興味のある方は参考にしてください。 記事を読む

  • 2015-12-31

    画像が読み込めなかった時に別の画像を表示させる方法

    画像が読み込めなかった時に別の画像を表示させる方法をご紹介します。画像が読み込めない時、altのテキストではなく別の画像を表示させたい方は必読です。3分後には実装可能です。 記事を読む

  • 2015-10-10

    まとめて良かった!WEBデザインするときに参考になるデザインまとめサイトのまとめ

    WEBデザインの参考になる21の「デザインまとめサイト」をご紹介します。WEBデザインをする方には、役立つコンテンツかな~と勝手に思い込んでいます。WEBデザインの参考にしてください。 記事を読む

  • 2015-11-11

    片方だけ横幅を設定してfloatする方法

    片方だけ横幅を設定してfloatする方法をご紹介します。横並びの要素で一方だけ横幅を設定したいあなたは、このコンテンツを参考にしてください。2分後にはあなたの希望が形になります。 記事を読む

コメントを残す


(必須)

CAPTCHA