デフォルトテーマTwentyNineteenにFontAwesomeを導入する方法【使い分け】

FontAwesomeと呼ばれるアイコンツールがあります。

このFontAwesomeを使うと、SNSボタンでそのSNSのロゴマークに使ったり、見出しの最初につけたりすることができます。

色々なサイトで見かける「▶」や「！」というアイコンにはFontAwesomeが使われている何てことは珍しくありません。

このFontAwesomeはWebフォントとして使用でき、かつサイズや色をそのスタイルに応じて自由・簡単に変更できるため、多くのシーンで利用されています。

今回はそのFontAwesomeを導入していく方法をご紹介します。

導入準備

前提として、FontAwesome5を使用していきます。

旧バージョンのFontAwesome4は現在も使用できますが、どうせですので、新バージョンの方を導入していきます。

ちなみにFontAwesome5とFontAwesome4は同じように感じますが、追加するコードなどが異なりますので、ご注意ください。

FontAwesome5は旧バージョンのFontAwesome4と異なり、以下のような使用方法となっています。

従来通りwebフォントとして使用する方法
SVG画像形式＆JavaScriptで使用する方法

どちらの方法でもできますが用途によって分けるのがおすすめです。

Before等の疑似要素に使用する場合➔Webフォント方式
文章上で使用する場合➔SVG画像形式

SVG画像形式の場合は、beforeやafterなどの疑似要素での使用を推奨されていません。
実際に試してみましたが、うまく表示されず面倒だったため、疑似要素にFontAwesomeを使用する場合は、「Webフォント方式」での導入方法をおすすめします！

手順①

Webフォント方式

Webフォントとして導入する場合は以下のコードをコピー

webフォント形式をtnで使う場合はfont-familyの関係上うまく表示されない場合があるため、SVG推奨

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

SVG画像形式

SVG画像形式の場合は、以下のコードをコピー

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<script defer src="https://use.fontawesome.com/releases/v5.6.1/js/all.js" integrity="sha384-R5JkiUweZpJjELPWqttAYmYM1P3SNEJRM6ecTQF05pFFtxmCO+Y1CiUhvuDzgSVZ" crossorigin="anonymous"></script>

手順②

先ほどのコードをheader.phpにある<head></head>のコードの間にコピペします。

<head></head>の中で他のコードに干渉しない場所であれば、基本的にどこでも大丈夫です。

実際に使用する

コードを<head></head>にコピペできたら実際に使用することができる状態となっています。

公式サイトにアクセスし、好きなアイコンを探します。

FontAwesome5公式サイトはこちら

公式サイト上部にある「icon」をクリックします。

たくさんのアイコンの中から、使いたいアイコンを選びます。
年会費を支払う会員用のアイコンと無料アイコンが一緒に表示されているため、サイドバーにある「free」をクリックし、無料のアイコンのみを表示させます。

今回は例として矢印を使用していきます。
通常の使用方法としては２通りあります。

ＨＴＭＬで表示させる場合

ＨＴＭＬで表示させる場合、つまり通常記事を書く際につかうエディターを使って表示させる方法です。
今回は新エディターのGutenbergを使用して解説していきます。

手順１

先程のアイコンのページ上部にある以下のコードをコピペします。

<i class="fas fa-arrow-circle-up"></i>

手順２

こちらのコードをエディターにペーストします。

Gutenbergエディタの場合は、ブロックの追加から【フォーマット＞カスタムＨＴＭＬ】のブロックに先程コピーしたコードをペーストします。

入力し、ページを更新すると、サイト上にアイコンが表示されています。
実際に表示されるのが以下のアイコンです。

▼アイコン▼

Webフォント方式にしている場合

ここで注意したい点があります。

「ＳＶＧ画像形式」のコードをヘッダーにコピペした場合は、上記の手順で問題なくアイコンが表示されますが、「Webフォント方式」のコードをヘッダーにコピペした場合は、上記の手順にひと手間加えなければ文字化けしてしまい、四角い豆腐状態になってしまいます。

Webフォント方式を採っている場合は、以下のコードをstyle.cssに追記してください。

html[lang="ja"] .fas{
	font-family:Font Awesome\ 5 Free !important;
}

以下の記事でもちょっと触れていますが、TwentyNineteenのデフォルト設定のうち、font-familyに「!important」がついているせいで、FontAwesomeのアイコンにうまくフォントの設定が適用されません。

上記のコードで、font-familyを再設定することで、表示されるようになります。

【font-family】デフォルトテーマTwenty Nineteenのフォントを変更するやり方！【Windows】

ＣＳＳで表示させる場合（疑似要素）

こちらはCSSにコードを追記することによって、FontAwesomeのアイコンを表示させる方法です。

この疑似要素にフォントFontAwesomeを使うことで、カスタマイズの幅が広がっていきます。
疑似要素にFontAwesomeを使うことで、h2等の見出しの横等に簡単にアイコンを追記することができるようになります。

なお当記事最初の方でも触れましたが、このCSSで表示させる方法は、SVG画像形式のコードを<head></head>間にコピペしている場合、うまく表示されない場合があるため、CSSで表示させたい場合は、Webフォント方式で導入をしてください。

手順１

疑似要素で表示させる場合は、導入したいFontAwesomeのアイコンページ上部にあるunicordをコピーします。

この【f35a】というunicordを使用します。

手順２

style.cssのファイルにコードを追記していきます。
今回は例として、当ブログのh4の見出しにFontAwesomeのアイコンを追加していきたいと思います。

h4にFontAwesomeを追記したい場合は、以下の様なコードになります。

article h4:before{
	content:"\f35a";
	font-family:Font Awesome\ 5 Free;
}

注意点としては、先ほどの【f35a】というunicordの前に\（バックスペース）を付けてください。
うまく表示されていないですが、表示されない場合は、\でかまいません。

これでこのように表示されます。

この状態ですと若干見にくいですので、コード以下のように変更して調整していきます。

article h4:before{
	content:"\f35a";
	font-family:Font Awesome\ 5 Free;
	font-size:17px;
	padding-right:7px;
}

こんな感じになります。

変更点としては、アイコンだけfont-sizeを小さくし、padding-rightでアイコンと文字の間にスペースを入れました。
あくまで当ブログの場合の調整ですので、参考程度にしてください。

まとめ

FontAwesomeを使うことで、サイトの印象が結構変わります。
TwentyNineteenで使用する場合は、多少必要な手順が増えますが、そんなに難しくないので、お気軽に導入してみてください～

Twitter

Facebook