Font Awesome のアイコンは以下のようにimgeではチャント表示されない。
<img src="your_svg_file.svg" alt="SVG画像" width="200" height="100">正式の表示方法がある。
公式説明サイト：https://docs.fontawesome.com/web/setup/host-yourself/webfonts
ダウンロード先：https://fontawesome.com/download
右のFree For Desktopからダウンロード。
目次
サイトで WebFonts + CSS を使う方法
ダウンロードされたファイルには以下のようなものが入っている。
cssの中にあるcssファイルをリンクし、svgsの中にあるアイコンを今回使うことになる。
この fontawesome 毎、中身が入ったまま好きな場所に配置する。
そして、そのfontawesomeへのパスを以下のように入れる。
コメントに、必要なのは３つであると記述されているので上から３つまで意外は不要ということになる。
プロ版では必要になるのかも。フリー版なので以下の３つだけを入れた。
しかしsvgsの中にはregularも入っているので同じように使ってみたので４つになっている。
パス href=”./fontawesome/css/fontawesome.css” はindex.htmlと同じディレクトリにある場合の設定になっている。
regularはプロのみとなっていたが、以下の設定で表示された。どういうことか不明。
<head>
<!-- プロジェクトに必要なのは Font Awesome Solid + Brands -->
<link href="./fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="./fontawesome/css/brands.css" rel="stylesheet" />
<link href="./fontawesome/css/solid.css" rel="stylesheet" />
<link href="./fontawesome/css/regular.css" rel="stylesheet" />
</head>
<body>
<i class="fa-solid fa-van-shuttle"></i>
<i class="fa-brands fa-accessible-icon"></i>
<i class="fa-regular fa-circle-down"></i>
</body><head>で配置したアイコンへのパスを入れ読み込む。
<body>に表示したいアイコンを入れる。
最初のfa-は無視してその後がcssのファイル名、次がsvgのアイコン名になる。
このように表示される。
サイトで SVG + JS ファイルを使う方法
Font Awesomeを自分のサイトにダウンロードして、以下に説明するSVG + JSを使用してプロジェクトにアイコンを取り込むことができる。
ダウンロードするファイルは先の説明と全く同じものになる。
SVG + JSで設定する
Font Awesome Downloadまたはパッケージの中には、必要なファイルがある。
/jsフォルダには、Font Awesomeのすべてのファミリー（Classic、Sharp、Brands）のコアスタイル、ユーティリティ、アイコン、およびスタイルオプション（Solid、Regular、Light、Duotone、およびThin）が含まれている。
プロジェクトにFont Awesomeファイルを追加する
サイトにフォルダを作成して、その中に以下のファイルを入れる。
無料で使えるのはbrandsとsolidと説明にはある。
- /js/fontawesome.js
- 必要なスタイルのjsファイル（ここでは/js/brands.jsと/js/solid.jsを入れてみる）
コアファイル/js/fontawesome.jsと、使用したい個々のスタイルのJSファイルを必ず含めること。
プロジェクトでFont Awesomeを参照
ページの<head>に、使用するスタイルのコアfontawesome.jsファイルとJSファイルをリンクする。
最後にfontawesome.jsローダーを参照することをお勧めするとのこと。
パスがファイルを配置した場所を正しく指していることを確認！
<i class=”fa-solid fa-user”>この中でuserがsvgsの中にあるuser.svgの名前になる。
パス src=”./fontawesome/js/brands.js” はindex.htmlと同じディレクトリにある場合の設定になっている。
<head>
<!-- プロジェクトに必要なのはFont AwesomeとSolid + Brandsだけです -->
<script defer src="./fontawesome/js/brands.js"></script>
<script defer src="./fontawesome/js/solid.js"></script>
<script defer src="./fontawesome/js/fontawesome.js"></script>
</head>
<body>
<!-- solid スタイルを使用する場合 -->
<i class="fa-solid fa-user"></i>
<!-- brand タイルを使用する場合 -->
<i class="fa-brands fa-github-square"></i>
</body>カラーとサイズの設定
以下の公式サイトで説明されているのですぐわかる。
説明サイト：https://docs.fontawesome.com/web/style/basics
<span style="font-size: 3em; color: Tomato;">
<i class="fa-solid fa-camera"></i>
</span>
<span style="font-size: 48px; color: Dodgerblue;">
<i class="fa-solid fa-camera"></i>
</span>
<span style="font-size: 3rem;">
<span style="color: Mediumslateblue;">
<i class="fa-solid fa-camera"></i>
</span>
</span>こんな方法もある。fa-6xがフォントサイズになる数値が大きくなるほどアイコンが大きくなる。
<i class="fa-solid fa-baby-carriage fa-6x" style="color: tomato"></i>この他、以下のところでサイズやカラーのHTMLを確認することもできる。
