wordpressにfont awesomeをインストールする方法

今回はwordpressにfont awesomeをインストールする方法やその使い方、cssでの指定・記述の仕方についてご紹介していきたいと思います。

wordpressにfont awesomeをインストールする方法

wordpressにfont awesomeをインストールする方法・手順としては、下記のような流れになります。

1. font awesome公式サイトでCDNコードをコピー
2. これをwordpressのヘッダー（header.php）のheadタグ内に貼り付ける

font awesome公式サイトでCDNコードをコピー

まずはfont awesome公式サイト（https://fontawesome.com/start）のトップページから、CDNのコードをコピーします。

CDNとはコンテンツ・デリバリー・ネットワーク「Content Delivery Network」の略で、同一のコンテンツを、 多くの配布先、例えば多くのユーザーの端末に効率的に配布するために使われる仕組みです。

2019年1月現在における最新バージョンVersion:5.6.3になりますが、これが古い場合は公式サイトからコピーしてください。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity
="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" 
crossorigin="anonymous">

wordpressのヘッダー（header.php）のheadタグ内に貼り付ける

次にfont awesome公式サイトでコピーしたCDNを、お使いのwordpressのヘッダー（header.php）のheadタグ内に貼り付けます。

まず左側のメニュー「外観」から「テーマの編集」をクリックします。

テーマヘッダー（header.php）のheadタグ内にCDNを貼り付けます。

あとは「ファイルを更新」ボタンを押すことで、wordpressにfont awesomeを導入・インストールすることができました。

CDNでのfont awesomeの導入は簡単ですし、サイトの動作も速いのでおすすめです。

fontawesomeの使い方cssの書き方、アイコンの探し方

今回はfontawesomeの使い方やcssの書き方（疑似要素（「:before」や「:after」）を使った方法）、効率的なアイコンの探し方についてご紹介していきたいと思います。fontawesomeの使い方まずfontawesome 5...

oyakudachilabo.com

2019.01.25

font awesomeで文字化けされ表示されない時の対策

おしゃれなアイコンを手軽にブログなどに導入できるfontawesomeですが、fontawesome5freeになってからはアイコンが文字化けされたり、きちんと表示されなくなったりするようです。というわけで今回はそんなfontawesome...

oyakudachilabo.com

2019.01.25