Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
このツールは使いやすかったですか？
フィードバックは改善に役立ちます
快速查找FontAwesome图标名称、类名及Unicode编码
アイコンプレビューはFontAwesome 6 CDN経由で読み込まれています。コピーしたクラス名は、FontAwesomeが導入済みのページでそのまま使用できます。
概要
解決できる課題、処理の仕組み、データの範囲を確認できます。
Font Awesomeのアイコンを実装するとき、名前だけでは目的の図柄やスタイルを判断しにくいことがあります。この検索では、収録された候補を名前・別名またはUnicodeの16進数で絞り込み、プレビュー、アイコン名、スタイル、コードポイントを見比べられます。結果からクラス名、HTML断片、CSSで使うUnicodeエスケープをコピーできます。
検索対象は選定済みの候補リストです。Font Awesomeの全アイコンを網羅する公式カタログではなく、見つからない場合も公式側にアイコンが存在しないとは限りません。入力は英語の名前や別名、16進数の一部が基本です。日本語の意味語を包括的に検索する辞書ではありません。
クラス名はスタイルの接頭辞とアイコン名を組み合わせた識別子です。たとえば塗りつぶし（solid）は fas fa-house、アウトライン（regular）は far fa-file のような形です。ブランドアイコンでは fab が使われます。Unicodeは字形を指すコードポイントで、クラス名とは使う場所が異なります。詳しくはFont Awesomeの公式アイコンデータ仕様とアイコン追加方法を参照してください。
使い方
手順に沿って操作し、例を使って入力と結果を確認します。
検索欄に英語のアイコン名、登録済み別名、またはUnicodeの16進数を入力します。例として home、search、f015 のような短い語から試せます。検索は一致部分を含む候補を絞り込みます。
「すべて」「塗りつぶし」「アウトライン」「ブランド」を切り替えます。同じ名前でも利用可能なスタイルが異なる場合があるため、プレビューと表示されたスタイルを確認してください。
候補カードでアイコン名と U+ 付きコードポイントを確認し、用途に合わせてクラス名、HTML、Unicodeのいずれかをコピーします。
貼り付け先のプロジェクトで、選んだアイコンとスタイルを含むFont Awesome資源が読み込まれているか確認し、実際のページで表示を確かめます。
たとえば home で候補を探し、塗りつぶしの「house」が表示された場合は、カードに出る名前とコードポイントを確認してから fas fa-house の形式のクラス名を選べます。候補の実データにより結果は変わります。
活用例
仕事や日常の流れの中での活用方法を紹介します。
フォームやナビゲーションを作るWeb制作者が、用途に近い英語語句で候補を探します。絵柄とスタイルを見比べ、採用候補のクラス名を既存の実装へ移せます。
CSS内に見慣れない16進コードがあるとき、その一部で検索して対応する候補名を確認します。コードの意味を読み解く手がかりになりますが、フォント資源が異なる環境で同じ表示になる保証にはなりません。
デザインレビューで塗りつぶし、アウトライン、ブランドの候補を並べて確認します。コピー前にカードのスタイル表示を見れば、クラスの接頭辞を選ぶ際の取り違えを減らせます。
Q&A
よくある疑問や迷いやすい点をまとめて確認できます。
日本語の意味語を広く理解する検索ではありません。候補に含まれる名前や別名との部分一致が対象なので、見つからなければ英語の名前・言い換え、またはUnicodeの16進数を試してください。
検索対象が選定済みの候補に限られるため、一覧にないアイコンは結果に出ません。短い英語語句やコードの一部でも試し、必要なら公式カタログで対象バージョンと利用可能なスタイルを確認します。
クラス名は図柄を指定する断片で、アイコンフォントや表示用資源そのものではありません。対象ページで互換性のあるFont Awesomeが読み込まれているか、選んだ名前とスタイルがそのバージョンに含まれるかを確認してください。
この画面のUnicodeコピーは、バックスラッシュと16進数を組み合わせたCSS向けのエスケープ形式です。HTMLの文字参照や別の実装方式とは記法が異なります。使う場所に応じた書式は公式Unicode手順で確認してください。
注意
利用範囲、結果の制限、必要な注意点を事前に確認します。
候補リストは完全な公式一覧ではなく、収録範囲や対応スタイルはFont Awesomeのバージョン・ライセンス構成と一致しない場合があります。あるアイコンが表示されても、利用中のプロジェクトで使えることを示すものではありません。導入先のバージョン、利用権限、アイコンとスタイルの対応を公式資料で確かめてください。
プレビューや貼り付け後の表示は、対応するFont Awesome資源の読み込みに左右されます。Unicodeだけを別のフォントで表示しても同じ図柄になるとは限りません。検索結果は選定やコード確認の補助として使い、最終的な見た目は実際のページで確認してください。
関連
関連ツール、特集、利用可能なAPIを探せます。