Font Awesome 5 の導入

ちょっとややこしかったのでメモしとく。

• Solid (塗り), Regular (線), Light (細い線)、Brands (ロゴ等) の4タイプがある
• 無料版では Solid、Regular、Brands 3タイプの一部が使える。Light は有料の Pro 版のみ
• Pro版永年ライセンスは60ドルで使用するプロジェクト数の制限はない。ただし、アップデートは1年間のみ可能
• 前者2つのフォントファミリーは "Font Awesome 5 Free"、Brands は "Font Awesome 5 Brands"
• npm版は2018年5月3日現在存在しない
• (要確認) OSにインストールして使える (Illustrator や Adobe XD で使える)

手順

• ダウンロード & 解凍
• web-fonts-with-css > webfonts にフォントのデータが入っている。これを一式、プロジェクトのソースディレクトリ > font に入れる
• web-fonts-with-css > scss にSassデータが入っている。このディレクトリごとプロジェクトのソースディレクトリ > scss に入れ、"font-awesome" とリネーム (プロジェクト/src/scss/font-awesome/)
• 同ディレクトリ内にある _variable.scss を開き、font ディレクトリのパスやベースサイズ等を変える
  パスは style.scss ではなく style.css からのパスなので注意
  (今回の設定では $fa-font-path を "./dev/src/font" に変奥)
• style.scss で必要なファイルを読み込ませる。通常、Solid　か Regular のいずれかを選択
• 【ついでに】OSにインストール。use-on-desktop フォルダ内の3つの OTFフォント3つを ライブラリの fonts フォルダに入れ再起動

@import './scss/font-awesome/fontawesome.scss'; //基本・必須
@import './scss/font-awesome/fa-solid.scss'; //Solid (塗り)
// @import './scss/font-awesome/fa-regular.scss'; //Regular (線)
@import './scss/font-awesome/fa-brands.scss'; //ロゴ等

使用方法1 (CSS のみで実装 1)

公式サイトのサンプルを継承を使いシンプルにした
使うアイコンは チートシート や アイコン一覧から探す。
アイコン一覧のページは、右上の i マークを押すと CSS指定で必要な文字コードが表示される。また、ページ最下部でタグや文字コードが簡単コピーできるボタンがある

// font-awesomeアイコン共通の設定
%my-fa-icon-base {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

// 各アイコンをセット

// Solid Sample
//   線アイコン使いたいなら regular のアイコンを指定 (font-family は同じ)
.user::before {
  @extend %my-fa-icon-base;
  font-family: "Font Awesome 5 Free";
  margin-right: .5rem;
  font-weight: 900; // regular のアイコンフォントなら 400
  content: "\f007";
  color: #F00;
}

// Brands Sample
.twitter::before {
  @extend %my-fa-icon-base;
  margin-right: .5rem;
  font-family: "Font Awesome 5 Brands";
  content: "\f099";
  color: #00aced;
}

使用方法2 (HTML の i タグで)

一例。クラス付だけでサイズ指定や回転、重ね合わせ等も可能。
Solid (fas), Regular (far), Brands (fab)、プラス アイコン種の指定

基本

<i class="fas fa-user"></i>

サイズ

<i class="fas fa-camera-retro fa-xs"></i>
<i class="fas fa-camera-retro fa-sm"></i>
<i class="fas fa-camera-retro fa-lg"></i>
<i class="fas fa-camera-retro fa-2x"></i>
<i class="fas fa-camera-retro fa-3x"></i>
<i class="fas fa-camera-retro fa-5x"></i>
<i class="fas fa-camera-retro fa-7x"></i>
<i class="fas fa-camera-retro fa-10x"></i>

リスト

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

モーションあり

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>

回転

<i class="fab fa-font-awesome fa-rotate-90"></i>
<i class="fab fa-font-awesome fa-rotate-180"></i>
<i class="fab fa-font-awesome fa-rotate-270"></i>
<i class="fab fa-font-awesome fa-flip-horizontal"></i>
<i class="fab fa-font-awesome fa-flip-vertical"></i>

使用方法3 (CSS のみで実装 2)

自分は使ってないけどメモ。
まず、必須の "fa-icon" ミックスインを読み込ませる。
そして、Solid なら .fas、Regular なら .far、Brands なら .fab を継承。
アイコンフォントを使いたい要素のスタイリングを行う (beforeで前に追加する実装)

.user {
  @include fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}

.twitter {
  @include fa-icon;
  @extend .fab;

  &:before {
    content: fa-content($fa-var-twitter);
  }
}

使用方法4 (JavaScript でインポート)

• Font Awesome 5がリリースされたぞ！ - Qiita

参考記事

• Icons | Font Awesome 一覧。有料のProアイコンは薄字で表示される。右上の i アイコンで背景指定する際の文字コードが表示される
• Cheatsheet | Font Awesome チートシート
• Get Started | Font Awesome ダウンロードと設置する場所の説明
• How to Use | Font Awesome i タグではなく、Sass で使う場合の方法。"Mixins for Sass" の項を参照