Font Awesomeの使い方① | Bootstrap4でFont Awesome v4.7を使用する

Pocket
LINEで送る

使えるようになるまでにちょっと敷居が高いけど、使えるようになるともう手放せないWebアイコンフォント。その代表格といえばFont Awesome!(「オゥサム」と読みます。素晴らしい!最高!って意味)

使えるようになったつもりでも、次の案件でまた使えなくなって豆腐(□)が表示されることを繰り返してるので、ここらで復習します。

第一回目は「Bootstrap4でFont Awesome v4.7を使用する」です。

Font Awesomeとは

  • Webアイコンフォント最大手。
  • 一部有料だが無料版でも十分使える。
  • SVGもダウンロードできるので、WEBデザインで使うのも楽ちん(コーダーとしてはオリジナルで作られるより設置が楽ちん)
  • バージョンによって使い方が違う。
  • 近々ver.6がリリースされる。
  • 失敗すると豆腐(□)が表示される(こっちの方でNo Tofu!言いたくなる)

Bootstrap4でFont Awesome v4.7を使用する

Bootstrap5は現時点でアルファ版がリリースされた段階なのでひとまず置いて、Bootstrap4で話を進めます。

CDNを読み込む

Font Awesomeで用意されているCDNではなく、Bootstrap用意しているCDNを使用します。
head内にCSSを記述します(BootstrapのCDNより下に配置します)。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
understrapを使用している場合

このブログはWordpressのunderstrapというBootstrap4をベースしたテーマを使用しています。
このテーマではCDN等読み込まなくても、Font Awesome v4.7のアイコンセットを使用することができます。

下記チートシートが便利です。


使用したいアイコンの「copy」をクリックし、タブを開きます。

HTMLタグで使用する

HTMLタグで使用するときは、「HTML Tag」(hoverでタグが表示されます)をクリックすることで、タグをコピーすることができます。
そのコピーしたタグをペーストしてタグを貼れば表示されます。

<i class="fa fa-heart"></i>


Font Awesomeのハートアイコンが表示されました。

文中や文頭でHTMLタグを挿入するだけなので 簡単に使用できます。
このように色を変える場合もcolor:#877666と、テキストと同じように変更できます。
楽しいですね。

先ほども述べたとおり、このブログはCDNを設置しなくてもFont Awesome v4.7が使用できます。つまり、このページで表示できてもあまり検証にはなりません。
なのでデモページも用意しました。

Bootstrap4.5でfontawesome4.7の表示デモ

CSSで記述して擬似要素で使用する

Unicodeで使用したことが無いのでパスして、CSSで記述して使用する場合に移ります。
ここでは擬似要素での使い方です。

「CSS Rule」をクリックすると、content:"\f004";とコードがコピーできます。
Font AwesomeのWebアイコンフォントを使用しているので、font-family: FontAwesome;もセットで指定します。

<p class="fontawesome-test01">ダミーテキストです</p>
p.fontawesome-test01::before {
  font-family: FontAwesome;
  content:"\f004";
  padding-right: 3px;
}

ダミーテキストです

こちらもアイコンの色を変えたい場合は、color: #CE0000;といったように追記します。

ダミーテキストです

Pocket
LINEで送る

back to top