Font Awesome アイコンを SVG 画像内に埋め込むにはどうすればよいですか?

SVG 画像に Font Awesome アイコンを含める

質問:

どのようにすれば、 Font Awesome アイコンを SVG 画像に追加しますか?既存の を置き換えます。 要素を持つ要素は結果を生成しません。

答え:

提供されたコードは、

Font Awesome の CSS スタイルシートを調べて、目的のアイコンに対応する特定の Unicode 文字を決定します。例:

.icon-group:before                { content: "\f0c0"; }
.icon-cloud:before                { content: "\f0c2"; }

アイコンを SVG に組み込むには、元のコードを次のコードに置き換えます。

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

スタイルシートに次のコードを追加します。

svg text {
   font-family: FontAwesome;
}

Font Awesome 5 の無料版を使用している場合は、次のフォントファミリーを使用してください宣言:

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

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