ワードプレスでfont awesomeアイコンフォントを使う方法【2020】
今回はwardpress(ワードプレス)でfont awesomeアイコンフォントを使う方法について解説したいと思います。
アイコンフォントとはアイコン型の文字のことでwebサイトを作る際に非常に役立つアイテムとなっており
それを利用するのとしないのとでは天と地の差がありサイトの印象も変わるので
必ず使いこなせるようにした方が良いでしょう。
2020年現在最新版で動作する方法で一番手っ取り早く簡単にアイコンフォントを使う方法について解説しています。
Contents
ワードプレスでfont awesomeアイコンフォントを使う方法【2020】
テーマエディターのヘッダー(headタグ内)のcssを読みこんでいるコードの下に
以下のコードを追加してください。
1 | <link rel="stylesheet"href="https://use.fontawesome.com/releases/v5.12.1/css/all.css"> |
これだけでfont awesomeのアイコンフォントが使用できるようになりました。
(本来はメールアドレスを登録していろいろ導入にめんどくさい作業が必要ですが上のコードを記述するだけで使えるようになります。※ワードプレス以外は動かないかもしれません)
使い方は
1 | <iclass="fa fa-clock-o"></i> |
のように決められたコードを記述するだけで表示されるようになります。
コードはfont awesomeの公式ホームページから調べることができます。
自分の欲しいアイコンはchromのほうが探しやすいです。
chromで公式ホームページを開いて日本語訳に変更する
すると以下の画面が出てきます。
下に行くとアイコンの種類が表示されるので欲しいアイコンの種類をクリック
するとアイコンがずらっと表示されますので自分が使いたいアイコンをクリックする
すると以下のようにコードが出てきますので
コードをコピペして張り付けるだけでokです。
font awesomeの大きさや色を変更する
続いてアイコンの大きさや色を変更する方法について解説したいと思います。
大きさを変更する方法は2パターンあり
fas fa-homeなどのアイコンコードの後に
fa-〇xと記述する。
fa-2xが2倍
fa-4xが4倍など
1 2 3 4 5 6 | <iclass="fas fa-home fa-2x"></i> <iclass="fab fa-amilia fa-2x"></i> <iclass="fab fa-twitter"></i> <iclass="fa fa-clock-o"></i> <iclass="fas fa-angle-double-left"></i> |
もしくはstyle.cssで色やフォントサイズなど通常の文字のフォントと同じように書式を変更することが可能です。
1 2 3 | .fa-home{ color:#1da1f2; } |
以上がfont awesomeアイコンフォントをワードプレスで使う方法となります。
font awesomeが動かない反映されない原因
続いてfont awesomeが動かない上手く導入できない原因についてお話ししたいと思います。
動かない原因は参照コードのコードミスかバージョンを間違えているためです。
font awesome参照コードのやり方は複数ありfont awesomeが更新される前の古いコードを記述すると動かない可能性があります。
またv5.12.1のバージョンの数字によって利用できるフォントの種類が変わります。
2020年現在では上記のコードでほぼ全て利用できるので問題ありません。
またバージョンが変わった場合もしかしたらそのうち上記のコードでも動作しなくなる可能性があります。