如何在 SVG 圖像中嵌入 Font Awesome 圖示？-css教學-PHP中文網

如何在 SVG 圖像中嵌入 Font Awesome 圖示？

Barbara Streisand

發布： 2024-11-23 04:42:42

原創

539 人瀏覽過

How Can I Embed Font Awesome Icons within SVG Images?

在SVG 影像中包含Font Awesome 圖示

問題：

問題：

如何合併將Awesome 圖標放入我的SVG 圖像中？取代現有的帶有元素的元素不會產生任何結果。

答案：

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

登入後複製

提供的程式碼將不起作用，因為 gt ;不是有效的 SVG 元素。要在 SVG 中顯示 Font Awesome 圖標，您需要包含與所需圖標相對應的 Unicode 字元。

檢查 Font Awesome 的 CSS 樣式表以決定所需圖示的特定 Unicode 字元。例如：

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

登入後複製

要將圖示合併到SVG 中，請將原始程式碼替換為以下內容：

svg text {
   font-family: FontAwesome;
}

登入後複製

在樣式表中，新增下列內容：

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

登入後複製

如果您使用免費版本的Font Awesome 5 ，請使用以下字體系列聲明：

以上是如何在 SVG 圖像中嵌入 Font Awesome 圖示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！