Font Awesome アイコンを SVG 画像に埋め込む方法

SVG 画像に Font Awesome アイコンを組み込む方法

SVG ファイル内の画像参照を Font Awesome アイコンに置き換えようとすると、問題が発生する場合があります以下を使用して構文:

<g><i>

根本的な原因

タグは有効な SVG 要素として認識されません。代わりに、目的のアイコンをレンダリングする実際の Unicode 文字を含める必要があります。

Unicode 文字の取得

Unicode 文字を取得するには、Font Awesome のスタイルシートを参照してください。ここで、各アイコンは f 文字で囲まれた 16 進値で表されます (雲アイコンの場合は f0c0 など)。ただし、SVG では構文を調整する必要があります。 f0c0 を  に変更します。

構文例

SVG にクラウド アイコンを含めるために調整された構文は次のようになります。

<g><text x="12" y="15">&#xf0c2;</text></g>

スタイリング考慮事項

アイコンが確実に表示されるようにするには、次の CSS ルールをスタイルシートに追加します:

svg text {
   font-family: FontAwesome;
}

Font Awesome 5 Free に関するメモ

Font Awesome 5 以降の無料版を使用している場合は、フォントファミリー宣言を更新する必要があります宛先:

svg text {
   font-family: 'Font Awesome 5 Free';
}

以上がFont Awesome アイコンを SVG 画像に埋め込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。