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

Patricia Arquette

發布： 2024-11-24 05:23:11

原創

471 人瀏覽過

How Can I Properly Embed Font Awesome Icons within SVG Images?

在SVG 影像中包含Font Awesome 圖示

用Font Awesome 圖示取代SVG 中的影像可能會遇到困難，因為SVG 中的“i”元素。要使用 Font Awesome 圖標，需要合併呈現圖標的特定字元。

透過檢查 Font Awesome 的樣式表，可以匯出每個圖示的 CSS 表示的語法。例如，在CSS 中：

.icon-cloud-download:before { content: "\f0ed"; }

登入後複製

在SVG 中，字元編碼不同：

<g><text x=&quot;0&quot; y=&quot;0&quot;>&amp;#xf0ed;</text></g>

登入後複製

另外，需要在樣式表中指定Font Awesome 字體系列：

svg text {
   font-family: FontAwesome;
}

登入後複製

對於Font Awesome 5的免費版本，字體系列聲明必須是更新：

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

登入後複製

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

來源：php.cn

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章