1. 本ページの目的
本ページで Font Awesome 5 を使う。
2. 導入手順
- Font Awesome のサイトにログインして
fontawesome-free-5.XX.X-web.zipファイルをダウンロードする。 - ダウンロードしたファイルを展開して、Webサーバー上に配置する。
- HTML に以下を記述する。
...[snip]...
<head>
<link href="fontawesome-free-X.XX.X-web/css/fontawesome.css" rel="preload" as="style">
<link href="fontawesome-free-X.XX.X-web/css/brands.css" rel="preload" as="style">
<link href="fontawesome-free-X.XX.X-web/css/solid.css" rel="preload" as="style">
<link href="fontawesome-free-X.XX.X-web/css/fontawesome.css" rel="stylesheet">
<link href="fontawesome-free-X.XX.X-web/css/brands.css" rel="stylesheet">
<link href="fontawesome-free-X.XX.X-web/css/solid.css" rel="stylesheet">
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="fab fa-github-square"></i> <!-- uses brand style -->
</body>
...[snip]...
4. パフォーマンス
DevTools の [Performance] パネルで計測した。
![DevTools [Performance] panel](20210621-devtools-performance.png)
![DevTools [Lighthouse] result](20210621-devtools-lighthouse-result.png)
利用（ダウンロード）されたフォントファイル
- fa-solid-900.woff2 (78.5 kB)
- fa-brands-400.woff2 (77.0 kB)
- 重くはない。
5. メモ
- SVG での利用方法も試したい。