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 フォルダに入れ再起動

```scss
@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)

公式サイトのサンプルを継承を使いシンプルにした
使うアイコンは [チートシート](https://fontawesome.com/cheatsheet) や [アイコン一覧](https://fontawesome.com/icons?d=gallery&s=solid&m=free)から探す。
アイコン一覧のページは、右上の 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で前に追加する実装)

```scss
.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](https://qiita.com/tamaina/items/4a0747bf20296e0aab15)


## 参考記事

* [Icons | Font Awesome](https://fontawesome.com/icons?d=gallery&m=free) 一覧。有料のProアイコンは薄字で表示される。右上の i アイコンで背景指定する際の文字コードが表示される
* [Cheatsheet | Font Awesome](https://fontawesome.com/cheatsheet) チートシート
* [Get Started | Font Awesome](https://fontawesome.com/get-started/web-fonts-with-css) ダウンロードと設置する場所の説明
* [How to Use | Font Awesome](https://fontawesome.com/how-to-use/web-fonts-with-css) i タグではなく、Sass で使う場合の方法。"Mixins for Sass" の項を参照