WordPressに「Font Awesome」を導入する方法

font-awesome-thumbnail

アイコンフォント「Font Awesome」をWordPressに導入する方法を紹介します。

Font Awesomeの導入方法

導入方法は以下の2通りあります。

  • フォントファイルを自サーバーにアップロードして読み込む方法
  • Font Awesomeのサイトへの直リンクから読み込む方法

前者は自サーバーがエラーにならない限りずっと使えるので安心です。
後者はFont Awesomeのサイトがダウンしたときアイコンが表示されなくなる可能性があります。

それぞれの方法で導入解説をしますので、お好きな方でお試しください。

自サーバーにファイルをアップロードして読み込む方法

Font Awesome公式サイトからDownload Freeをクリックします。

font-awesome-01

ダウンロードFont Awesome

ZIPファイルを解凍すると、web-fonts-with-cssというフォルダがあります

font-awesome-02

必要なのはこれだけなので、あとは削除でも構いません。

FTPソフトを使って、テーマフォルダ/css/の階層にfontawesomeフォルダを作成します。

あくまで私の方法なので、cssの階層は作らずテーマフォルダ直下でもOKです。

web-fonts-with-cssの中身をfontawesomeフォルダにアップロードします。

font-awesome-03

<head></head>の間に下記コードを追加します。

<link rel='stylesheet' href='<?php get_template_directory_uri(); ?>/css/fontawesome/css/fontawesome.min.css' type='text/css' media='all' />

子テーマを使用している場合は、template_directoryではなくstylesheet_directoryとなります。

<link rel='stylesheet' href='<?php get_stylesheet_directory_uri(); ?>/css/fontawesome/css/fontawesome.min.css' type='text/css' media='all' />

公式サイトへの直リンクから読み込む方法

こちらはとても簡単で、下記コードを<head></head>の間に追加するだけです。

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

実際にFont Awesomeアイコンを表示する

Font Awesomeアイコンを表示するには、それぞれのコードを記述します。
下記のページに、全てのアイコンが紹介されています。

参考Font Awesome Icons

使用したいアイコンをクリックするとコードが表示されます。
試しに一つ、カレンダーアイコンを表示してみましょう。

font-awesome-04

アイコンフォントは文字と同じ扱いなので、CSSで大きさや色を変更することができます。

例えば、大きさを50px、色を青にしてみます。

.fa-calendar-alt {
font-size: 50px;
color: blue;
}

疑似要素を使ってアイコンを表示する

直接コードを記述する方法よりは、:before、:afterなどの疑似要素で使われるのが一般的です。

例えば、見出しの先頭にワンポイントとして表示したりします。
当ブログだと、下の画像のように表示しています。

font-awesome-05

疑似要素を使うには、まず下記のようなCSSを記述します。
beforeは指定した要素の前、afterは後ろにアイコンが表示されます。

h3:before {
content: '\f1e0';
font-family: "FontAwesome";
padding-right: 5px;
}

contentプロパティーに、fから始まる4桁のUnicodeを記入します。
これも各フォントページに小さく載っています。

font-awesome-06

先頭には、\を必ず入れてください。
キーボード半角状態で¥キーを押したものです。

アイデア次第で、様々なブログカスタマイズに応用できるアイコンフォント。
好みのアイコンフォントを見つけて遊んでみてください。

font-awesome-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで