Font Awesome v5の使い方

WEB制作
Font Awesome v5の使い方

様々なアイコンがcssだけで使えるようになるFont Awesomeがバージョン5にアップデートして少し使い方が変わっていたのでメモ

目次

導入方法

CDNで公開されているcssファイルを読み込むだけです。

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

最新版はこちらから

使い方

使いたいアイコンをこちらのページで調べてタグをコピペするだけです。

<i class="fab fa-500px"></i>

疑似要素で使用する

疑似要素で使用する場合は、v5からはfont-weight: 900;が必要になりました。

.sector::before {
  content: '\f002';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

ブランドロゴ

ブランドロゴは、指定するfont-familyが異なります。

.sector::before {
  content: "\f099";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
}