• メニュー
Jun 16, 2017

Font Awesomeの使い方

Font Awesomeとは?

Font Awesomeは、ネット上で公開されている様々なアイコンを、Webフォントとして利用することができます。
アイコンをフォントとして使えるため、CSSで調整することで、簡単に色や大きさを変更することができます。
画像ではないので、いちいち用意しなくてすむので楽になります。

使い方

wordpressでの使い方です。

1.header.phpに下記のコードを追加する

コードのcssが古いと表示されないアイコンがでてくるので、cssが最新かを確認してから追加しましょう!

2.アイコンを選んでコードをコピー&ペースト

Font Awesomeのサイトへ行き、iconsのページへいきます。
するとアイコンがずらりと並んでいますので、使いたいアイコンを選びます。クリックするとコードが書いてあるページへ飛ぶので、そこに書いてあるコードをコピーして、自分のサイトの使いたい場所へペーストします。

3.大きさの変更の仕方

fa-lg (1.333…倍)
fa-2x (2倍)
fa-3x (3倍)
fa-4x (4倍)
fa-5x (5倍)

fa-◯xの数字の部分を変更するだけで大きさが変えられるようになっています。便利ですね。

関連記事