如何在 SVG 图像中正确嵌入 Font Awesome 图标？

Patricia Arquette

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

原创

469 人浏览过

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

作者最新文章