ゆるくはじめるWordPress.

600種類のアイコンが無料!Font Awesomeの使い方

font-awesome

メニューやボタン部分に文字だけじゃなくてアイコンがあったら、わかりやすくて便利ですよね。
アイコンがあると直感的に操作できて、見る側のストレスもぐんと減らすことができます。
Font Awesomeは完成度の高いアイコンが600種類以上もあり、商用でも無償で利用可。導入方法もとっても簡単なのでおすすめです。

今回はそんなFont Awesomeの使い方を画像付きでまとめてみました。

Font Awesomeで使えるアイコンの一例

font-awesome-icon1

ブログのナビゲーションに使えそうなアイコンも色々あります。実際私も使いまくってます。


font-awesome-icon2

ソーシャルボタンや、記事のシェアボタンなんかをオリジナルで作る時にも役立ちます。日本国内を中心に利用されているサービスのアイコンはまだ無いものもありますが…


font-awesome-icon3

他にも工夫次第で色々使えそうなユニークなアイコンがたくさん。フォントなのでCSSで色や大きさも変えることができます。


Font Awesomeの使い方

<link>コードをコピペ

まずFont AwesomeGet Startedページへ行き、『EASIEST: BootstrapCDN by MaxCDN』のところにあるコードを自分のサイトの<head>~</head>内に貼り付けます。

font-awesome-cdn

これで全てのアイコンを使う準備ができました。簡単!
コード内の4.5.0などの部分はバージョンの数字なので、新しいバージョンで追加されたフォントを使用したい場合はこの数字を書き換える必要があります。アイコンが表示されないなと思ったら一度ここを確認。


使いたいアイコンを選ぶ

Iconsページから使いたいアイコンを選びます。

font-awesome-list

HTMLにコピペ

font-awesome-code

使いたいアイコンをクリックすると、専用の<i>タグが表示されるので、それをHTMLの使いたい場所に貼り付ければアイコンが表示されます。
CSSで利用したい場合、Unicodeの部分に書いてある文字列を使えば疑似要素などで表示させる事もできます。

CSS

.class::before {
  font-family: FontAwesome;
  content: "\f286";
}

使い方いろいろ

アイコンを回転させてみたり
アイコンと アイコンを 重ねてみたり
最初からCSSが用意されていてHTMLに書き足すだけで使えるので、初心者にもやさしい。
他にも色々な使い方がExamplesページに載ってます。たくさんのアイコンを見ているだけでも楽しかったりするので、気になったら一度ご覧ください~。


スポンサーリンク

公開日: