カテゴリー:
Font Awesome
閲覧数:515 配信日:2020-04-08 10:37
Font Awesome 表示方法は2種類ある
比較一覧表
| A.JavaScript + SVG | B.CSS + Webフォント | 備考 | |
|---|---|---|---|
| アイコンを最終的に何形式で表示するの？ | SVG | Webフォント | - |
A.JavaScript + SVG
<script defer src="~"></script>でアイコンを読み込んで表示
HTMLの中に <i class="〜〜〜"></i> コードを挿入
SVG として表示
HTML経由
class指定
<i class="fa fa-address-book"></i>
↓<i class="fa fa-address-book" aria-hidden="true"></i>
B.CSS + Webフォント
CSSの疑似要素（before）を使用して、Web フォント(アイコン)を表示する
・font-family: "Font Awesome 5 Free";でFontAwesomeを指定
・content: '\f1e2'でアイコンの種類を指定
・バックスラッシュが必要
CSS経由
Unicode指定
f2b9