如何在我的svg中包含一个字体真棒图标? [英] How do I include a font awesome icon in my svg?
本文介绍了如何在我的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>
如何替换该行w / a font awesome图标:
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。您需要包含显示图标的实际字符。如果您查看字体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"></text></g>
然后在您的样式表中添加:
And then in your stylesheet add:
svg text {
font-family: FontAwesome;
}
这篇关于如何在我的svg中包含一个字体真棒图标?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文