Font Awesome アイコン検索

機能

• 2000以上のアイコン（solid / regular / brands の3スタイル）
• 名前・ラベル・検索語の三層で照合し、層ごとに順位付け —— 名前の一致が優先
• 複数語は「すべて一致」：`arrow up` は両方を含むアイコンだけを返します
• ハイフンで語を分割するので `arrow right` が `arrow-right` に一致します
• スタイルで絞り込み（ブランドアイコンは brands にのみ存在）
• アイコンをクリックすると4通りの使い方（クラス名・インライン SVG・Unicode・HTML 実体参照）をコピーできます
• アイコンは公式スプライトを `<use>` で参照（1アイコン＝1 DOM ノード。1ページに数十個でも軽い）
• 索引もアイコンも当サイトにあるのでオフラインで使え、ライセンス条件どおり一覧の下に帰属表示があります

使い方

1. 検索欄に名前か用途を入力します（英語以外で見つからないときは英語を試してください）
2. 必要ならスタイルで絞り込みます（ブランドアイコンは brands にあります）
3. アイコンをクリックすると4通りの使い方が開きます
4. 必要なものをコピーしてプロジェクトに貼り付けます

よくある質問

商用利用できますか？

できます。 Font Awesome Free のアイコンは CC BY 4.0 で、商用利用・改変・再配布がいずれも認められており、唯一の条件は帰属表示です（プロジェクトのライセンス一覧に Font Awesome と Fonticons, Inc. を記載すれば十分です）。フォント部分は SIL OFL 1.1、コードは MIT —— いずれも「無料版は商用不可」という言説よりずっと寛容ですが、表示の保持は必要です。

英語以外の語で検索しても出ないのはなぜですか？

アイコンの名前・ラベル・検索語がすべて英語だからです（Font Awesome のデータに翻訳は含まれません）。したがって英語で検索してください：たとえば「アップロード」なら `upload`（結果は `arrow-up-from-bracket`）、「共有」なら `share`、「削除」なら `trash` か `delete` です。別の言語で考えている場合は、その動作の英語名を考えるのが早道です —— 検索結果に「どの層で一致したか」を出しているのもそのためです。

クラス名とインライン SVG のどちらを使うべきですか？

プロジェクトがすでに Font Awesome を読み込んでいるかで決まります。読み込んでいるならクラス名 `<i class="fa-solid fa-house">` を使ってください —— サイズや色の調整が簡単で、CSS と一緒にキャッシュされます。読み込んでいないなら、数個のアイコンのために導入しないでください。インライン SVG（`<svg><use href="/fa-sprites/solid.svg#house"></use></svg>`、またはパスデータをそのまま HTML に）を使ってください。ここに出るコードはそのまま使えますが、インライン SVG の断片は当サイトのスプライトを指しているので、自分のプロジェクトに移すときはスプライトも一緒にコピーしてください。

Unicode の2種類はいつ使いますか？

アイコンフォントの場面です：`\f015` は CSS の書き方（疑似要素と組み合わせて `content: "\f015"`、あるいは `::before` でアイコンボタン）、`&#xf015;` は HTML 実体参照の書き方です。どちらもクラス名が不要な代わりに可読性が悪く、コードを読んだ人は `\f015` が何か分かりません。したがって、たとえば装飾目的のアイコンを疑似要素で出す（HTML に空要素を増やしたくない）場合など、本当に必要なときだけ使ってください。