首頁 > web前端 > css教學 > 如何在 SVG 圖像中嵌入 Font Awesome 圖示?

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

Barbara Streisand
發布: 2024-11-23 04:42:42
原創
548 人瀏覽過

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板