Font Awesomeの簡単な使い方:WordPressで有効活用しよう!

font-awesome-thumbnail

WordPressで「Font Awesome」を使用する方法を紹介します。

「Font Awesome」はアイコンフォントの一種で、様々なアイコンをWebフォントのように操作することができます。

さやか先生
普通アイコンは画像を用意する必要がありますけど、そういう手間が省けるっていうのがアイコンフォントのメリットですよね!
そうですね。アイコンフォントを使えばCSSで色やサイズを変えたり、画像の容量を節約することもできます
やまかわ

「Font Awesome」を使用するための手順

「Font Awesome」を利用するには、以下の2通りの方法があります。

  • 【ちょいムズ】フォントファイルを自サーバーにアップロードして読み込む
  • 【初心者用】Font Awesomeのサイトへの直リンクで読み込む

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

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

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

Font Awesome公式サイトからFor the Webをクリックします。

Font Awesomeをダウンロードする

Font Awesomeをダウンロードする

Font Awesome

ZIPファイルがダウンロードされたら解凍してください。

fontawesome-free-5.2.0-webというフォルダが解凍されたら、これをfontawesomeという名前に変更します。

フォルダ名を変更する

フォルダ名を変更する

ファイルをサーバーにアップロードするにはFTPソフトを使用します。
私の使っているFTPソフト(FFFTP)の使い方はこちらを参考にしてください。

child-theme-copy-thumbnail
サイトをWordPressで作るメリットの一つとして、自分好みに自由にカスタマイズできるということが上げられます。 ですが、ちょっとし

FTPソフトでフォントフォルダをアップロードする

wp-content/themes/テーマフォルダ/の階層にcssフォルダを作成し、その中にfontawesomeフォルダをアップロードしてください。

fontawesomeフォルダをアップロードする

fontawesomeフォルダをアップロードする

ヘッダーでCSSを読み込む

以下のコードをヘッダーの<head></head>の間に貼り付けます。

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

これで先ほどアップロードした「Font Awesome」のデータを読み込みます。

子テーマの場合は、<?php get_template_directory_uri(); ?>ではなく<?php get_stylesheet_directory_uri(); ?>となります。

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

2.公式サイトへの直リンクで読み込む方法

こちらの方法はとても簡単で、以下のコードをヘッダーの<head></head>の間に貼り付けるだけです。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

初心者の方は断然こちらがおすすめです。

【基本】Font Awesomeアイコンを表示する

アイコンを表示させるには、それぞれの専用コードを記述します。

こちらのページに、全てのアイコンが紹介されています。
使用したいアイコンをクリックしてみましょう。

Font Awesome Icons

試しにカレンダーアイコンを表示してみます。
左下に表示されているコードを記事中に貼り付けてみてください。

コードをコピーする

コードをコピーする

<i class="fas fa-calendar-alt"></i>

アイコンフォントはWebフォントです。
CSSでプロパティーを変えることで見た目をカスタマイズできます。

例えばこうすると、大きさを50px、色を青に変更できます。

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

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

::before、::afterなどの疑似要素を利用すると、アイコンフォントの利便性は格段に上がります。

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

疑似要素を使ったアイコンフォントの例

疑似要素を使ったアイコンフォントの例

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

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

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

Unicordをコピーする

Unicordをコピーする

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

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

コメントを残す

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

承認制のため反映にお時間をいただきます。