如何在我的 svg 中包含字体真棒图标? [英] How do I include a font awesome icon in my svg?

问题描述

我有一个包含图像的 svg:

I have an svg that includes images:

<g><image id="myImage" class="myClass" x="12" y="15" width="10" height="10" xlink:href="/images/pic.png"/></g>

如何用字体真棒图标替换该行:

How do I replace that line w/ a font awesome icon:

<g><i class="icon icon-cloud-download" x="12" y="15" width="10" height="10"></i></g>

似乎不起作用，因为图像没有显示出来.

doesn't seem to work as the image doesn't show up.

推荐答案

i 不是有效的 SVG.您需要包含显示图标的实际字符.如果你看看 font awesome 的样式表 你会看到...

i is not valid SVG. You need to include the actual character that displays the icon. If you take a look at font awesome's stylesheet you will see...

.icon-group:before                { content: "f0c0"; }
.icon-link:before                 { content: "f0c1"; }
.icon-cloud:before                { content: "f0c2"; }
.icon-beaker:before               { content: "f0c3"; }
.icon-cut:before                  { content: "f0c4"; }
.icon-copy:before                 { content: "f0c5"; }
.icon-paper-clip:before           { content: "f0c6"; }
.icon-save:before                 { content: "f0c7"; }
.icon-sign-blank:before           { content: "f0c8"; }
.icon-reorder:before              { content: "f0c9"; }
.icon-list-ul:before              { content: "f0ca"; }
.icon-list-ol:before              { content: "f0cb"; }
.icon-strikethrough:before        { content: "f0cc"; }
.icon-underline:before            { content: "f0cd"; }
.icon-table:before                { content: "f0ce"; }

但那些是为 CSS 编码的 unicode 字符.在 SVG 中，您需要将示例 f040 的语法更改为:

But those are unicode characters encoded for CSS. In SVG you would need to change the syntax of example f040 to:

<g><text x="0" y="0">&#xf040;</text></g>

然后在您的样式表中添加:

And then in your stylesheet add:

svg text {
   font-family: FontAwesome;
}

根据 Niek 的评论，如果您使用 Font Awesome 5+ 的免费版本，则必须使用以下 font-family 声明:

According to Niek's comment, if you use the free version of Font Awesome 5+, you must use the following font-family declaration:

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

这篇关于如何在我的 svg 中包含字体真棒图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！