Font Awesome(Web Fonts with CSS)使用方法


たまに使うと忘れている事が多いので、まとめます。
Ver.5で使えるようになった「SVG with JS」ではなく、従来からある「Web Fonts with CSS」の方です。

## 使用準備
CDNを使う方法と、ホストするサーバーにファイルを置く方法があります。

### CDNを使う場合
```:html
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.css" type="text/css" media="all" />
```
font-awesome-animation.cssはアニメーションする場合のみ必要です。


### ホストするサーバーにファイルを置く場合

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Font Awesome Free for the Webをダウンロードします。
圧縮ファイルを解凍して、cssフォルダのall.min.cssファイルかall.cssファイルと、webfontsフォルダを使います。
cssファイルからwebfontsフォルダの中のファイルを読んでいるので、パスがずれない様に注意しましょう。

```:html
<link href="/css/all.min.css" rel="stylesheet">
```




## アイコンを探す
### 見本ページ
https://fontawesome.com/icons/
カテゴリーをチェックして絞り込みや、キーワードから検索してアイコンを探す事ができます。
Free版を利用する場合は、まず左のFreeをチェックすると良いです。
使用したいアイコンをクリックして個別アイコンページへ移動します。

### cheat sheet
https://fontawesome.com/cheatsheet


## 使用方法

### iタグで使う場合
慣用的にiタグを使いますが、実際はiタグである必要は無いのでspanタグでも良いです。


#### 大きさの変更

|クラス|倍率|
|---|---|
|fa-lg|1.333...倍|
|fa-2x|2倍|
|fa-3x|3倍|
|fa-4x|4倍|
|fa-5x|5倍|

```:html
<i class="fab fa-github fa-4x"></i>
```

他の大きさにしたいときはクラスを追加して自分でCSSでサイズ指定できます。

#### 色の変更
iタグに任意の名前のclassを追加し、それに対して自分でCSSで色を指定します。


#### 反転

|クラス|反転の方向|
|---|---|
|fa-flip-horizontal|水平反転|
|fa-flip-vertical|垂直反転|

```:html
<i class="fab fa-github fa-flip-vertical"></i>
```


#### 回転

|クラス|回転角度|
|---|---|
|fa-rotate-90|右に90度傾ける|
|fa-rotate-180|右に180度傾ける|
|fa-rotate-270|右に270度傾ける|

```:html
 <i class="fab fa-github fa-rotate-270"></i>
```

#### アイコンを線で囲む

|クラス|内容|
|---|---|
|fa-border|borderを追加|

```:html
<i class="fab fa-github fa-border"></i>
```

線の色はデフォルトでは灰色ですが、border-colorで色の変更が可能です。
border-radiusで丸くする事も可能です。


#### アイコンを重ねる

|クラス|付与するタグ|
|---|---|
|fa-stack|親のタグに追加|
|fa-stack-2x|背面のアイコンに追加|
|fa-stack-1x|前面のアイコンに追加|

```:html
<span class="fa-stack">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fab fa-github fa-stack-1x" style="color:white;"></i>
</span>
```
 
※背面のアイコンを先に書きます。

#### 等幅

|クラス|内容|
|---|---|
|fa-fw|等幅|

#### リストアイコンとして使用する

|クラス|内容|
|---|---|
|fa-li|リストアイコン|

```:html
<ul class="fa-ul">
  <li><i class="fab fa-github fa-li "></i>GitHub</li>
</ul>
```




#### 回り込み

|クラス|左右どちらか|
|---|---|
|fa-pull-left|左|
|fa-pull-right|右|

```:html
<i class="fab fa-github fa-3x fa-pull-left"></i>日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基くものである。
```




#### アニメーション




|クラス|動き|
|---|---|
|faa-bounce animated|バウンス|
|faa-burst animated|バースト(拡大して消える)|
|faa-flash animated|フラッシュ(点滅)|
|faa-float animated|フロート(浮遊)|
|faa-horizontal animated|ホリゾンタル(横揺れ)|
|faa-pulse animated|パルス|
|faa-passing animated|パッシング(左から右へ)|
|faa-passing-reverse animated|パッシングリバース(右から左へ)|
|faa-ring animated|リング|
|faa-shake animated|シェイク|
|faa-spin animated|スピン|
|faa-tada animated|tada|
|faa-vertical animated|バーティカル(縦揺れ)|
|faa-wrench animated|レンチ|

```:html
<i class="fab fa-github faa-vertical animated"></i>
```

##### hover時のみアニメーションさせる場合
animatedをanimated-hoverに変更します。

```:html
<i class="fab fa-github faa-vertical animated-hover"></i>
```

##### 親要素へのhover時のみアニメーションさせる場合
親要素にfaa-parent animated-hoverを追加します。
子要素にはfaa-xxxのみ追加します。(animatedはつけない)

```:html
<div class="faa-parent animated-hover">
  <i class="fab fa-github faa-vertical"></i>
</div>
```


























### 背景画像として使う
:afterや:beforeなどの疑似要素を使用します。
アイコンはcontentにユニコードで指定します。
font-familyにfontAwesomeを指定し、大きさはfont-sizeで変更可能です。

```:css
ul {
  padding-left: 2rem;
  position: relative;
}
 
ul li {
  list-style-type: none;
  line-height: 1.5;
}
 
ul li:before {
  font-family: "Font Awesome 5 Brands";
  /* font-family: "Font Awesome 5 Free"; */
  content: "\f09b";
  position: absolute;
  left : 0.5rem;
}
```




















## デザインアプリで使う
Adobe Photoshop、Illustrator、XDなどでも使用できます。

### ダウンロード
https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started
Font Awesome Free for the Desktopを押してダウンロードします。

### インストール
OTFファイルをインストールします。
デザインアプリを開き、フォントリストの中に「Font Awesome 5 Brands」と「Font Awesome 5 Free」があればインストール完了です。
インストールしたセットは3つですが、Solidは「Font Awesome 5 Free」の細字なので2つで良いです。

### 使用
https://fontawesome.com/cheatsheet
ユニコードではなくアイコンの方をコピーして、デザインアプリ上でペーストします。
ペースト後にフォント指定をして文字化けを直します。

## 表示されないとき

### font-weightや接頭辞の指定を確認する

|分類|説明|font-weight|接頭辞|プラン|
|---|---|---|---|---|
|SOLID|白抜き|900|fas|free|
|REGULAR|アウトライン|400|far|pro|
|LIGHT|線が細いもの|300|fal|pro|
|BRANDS|ブランドロゴ|400|fab|free|


### Font AwesomeのCSSを非同期で読み込んでいる場合
非同期をやめてみましょう。


### font-familyの記述位置の確認
「*」に設定している場合、「body」など他のタグに変更してみましょう。


### ローカルのファイルでダメな場合]
CDNを使うように変更してみましょう。
または、httpでの接続を試してみましょう。

### 疑似要素で使用している場合
元の要素でfont-weightを指定しているか確認してみましょう。