FontAwesomeアイコン検索ツール

ツール使用ガイド

1. 検索ボックスに「user」「search」「heart」などのアイコンキーワードを入力すると、ツールは一致するアイコンリストを自動的に表示します。
2. 結果を参照して、目的のアイコンを見つけてください。結果にはアイコンプレビュー、クラス名、およびUnicode符号が表示されます。
3. 「クラス名をコピー」または「Unicodeをコピー」ボタンをクリックして、コードをクリップボードにコピーし、HTMLまたはCSSファイルに直接貼り付けて使用できます。

入力例：キーワード「home」
出力結果：クラス名 fas fa-home、Unicode f015、HTML例

よくある質問（FAQ）

• 無料版（Free）とプロ版（Pro）のアイコンはどう区別するのですか？ 本ツールはデフォルトで無料のアイコンセットを表示します。Proアイコンが必要な場合は、FontAwesomeの公式ウェブサイトでライセンス情報をご覧ください。
• コピー後、アイコンが表示されないのはなぜですか？ ページがFontAwesome CSSファイル（CDNなど）を読み込んでいることを確認してください。また、クラス名の形式が正しいことを確認してください。一般的な原因は、スタイルライブラリが読み込まれていないか、クラス名のスペルが間違っていることです。

注意事項

検索機能はアイコン名とエイリアスに基づいており、中国語と英語のキーワードをサポートしていますが、特殊文字入力は一致しない可能性があります。本ツールはアイコンコードのみを提供し、スタイルファイルの読み込みサービスは含まれていません。プロジェクト内でFontAwesomeリソースを読み込んでください。すべてのアイコン情報はFontAwesomeの公開データに基づいており、学習と開発用途にのみ使用してください。

専門技術メモ / 使用上の推奨事項

プロジェクト内ではクラス名方式でアイコンを参照することをお勧めします。スタイル統一とキャッシング利点を保つためです。アイコンを動的に変更する必要がある場合は、JavaScriptでエレメントのclassNameを変更するか、innerHTMLを対応するUnicodeに設定できます。古いブラウザと互換性が必要なシナリオでは、タグをCSS font-family と疑似要素と組み合わせて使用し、DOMノードを削減できます。例： および .icon { font-family: 'Font Awesome 5 Free'; font-weight: 900; } を定義します。