Font Awesomeの簡単な使い方：WordPressで有効活用しよう！
WordPressで「Font Awesome」を使用する方法を紹介します。
「Font Awesome」はアイコンフォントの一種で、様々なアイコンをWebフォントのように操作することができます。
さやか先生
やまかわ「Font Awesome」を使用するための手順
「Font Awesome」を利用するには、以下の2通りの方法があります。
- 【ちょいムズ】フォントファイルを自サーバーにアップロードして読み込む
- 【初心者用】Font Awesomeのサイトへの直リンクで読み込む
前者は自サーバーがエラーにならない限りずっと使えるので安心です。
後者はFont Awesomeのサイトがダウンしたときアイコンが表示されなくなる可能性があります。
それぞれの方法で解説をしますので、お好きな方でお試しください。
１．自サーバーにファイルをアップロードして読み込む方法
Font Awesome公式サイトからをクリックします。
Font Awesomeをダウンロードする
ZIPファイルがダウンロードされたら解凍してください。
fontawesome-free-5.2.0-webというフォルダが解凍されたら、これをfontawesomeという名前に変更します。
フォルダ名を変更する
ファイルをサーバーにアップロードするにはFTPソフトを使用します。
私の使っているFTPソフト（FFFTP）の使い方はこちらを参考にしてください。
FTPソフトでフォントフォルダをアップロードする
wp-content/themes/テーマフォルダ/の階層にcssフォルダを作成し、その中に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' />
２．公式サイトへの直リンクで読み込む方法
こちらの方法はとても簡単で、以下のコードをヘッダーの<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アイコンを表示する
アイコンを表示させるには、それぞれの専用コードを記述します。
こちらのページに、全てのアイコンが紹介されています。
使用したいアイコンをクリックしてみましょう。
試しにカレンダーアイコンを表示してみます。
左下に表示されているコードを記事中に貼り付けてみてください。
コードをコピーする
<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をコピーする
先頭には、\を必ず入れてください。
キーボード半角状態で￥キーを押したものです。
アイデア次第で、様々なブログカスタマイズに応用できるアイコンフォント。
好みのアイコンフォントを見つけて遊んでみてください。
