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関連の記事でお役に立てれば幸いです。

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

  • 簡単便利!ダミー画像を作成するなら【placehold.jp】で決まり!

    ダミー画像を簡単に作成することのできる【placehold.jp】をご紹介します。簡単な操作でダミー画像がサクッと作成できる無料サービス。WEBサイトの制作などダミー画像が必要になったら【placehold.jp】がめちゃ便利です。 記事を読む

  • 予想以上に簡単だった!YOUTUBE動画のサムネイルを取得する方法

    YOUTUBE動画のサムネイルを取得する方法をご紹介します。YOUTUBEの様々なサイズのサムネイルを取得したい方に向けたコンテンツです。2分後にはお好きなサイズのサムネイルを自由に取得できるようになります。 記事を読む

  • 美しいグラデーションをCSSだけでどこまで実現できるのか検証してみました。

    美しいグラデーションをCSSだけでどこまで実現できるのか検証してみました。CSSだけでデザインにグラデーションを導入したい方は参考にしてください。5分後にはグラデーションを自由自在に操れるようになります。 記事を読む

  • 背景画像をレスポンシブに対応させる方法

    背景画像をレスポンシブに対応させる方法をご紹介します。paddingを指定して横幅と縦幅の比率を保持したまま、背景画像を縮小拡大する方法です。3分間です。3分間で背景画像をレスポンシブに対応させる方法をマスターできます。 記事を読む

  • たったの3分!WEBサイトの背景に動画を敷く方法

    とある案件でWEBサイトの背景に動画を敷く機会がありました。この機会に動画を背景に敷く方法と、動画背景を実装するときの注意点を分かりやすくまとめてみました。動画背景の実装をご検討中の方、参考にしてください。 記事を読む

コメントを残す


(必須)

CAPTCHA