我有一个包含图像的svg:
<g><image id="myImage" class="myClass" x="12" y="15" width="10" height="10" xlink:href="/images/pic.png"/></g>
如何用字体真棒图标替换该行:
<g><i class="icon icon-cloud-download" x="12" y="15" width="10" height="10"></i></g>
由于图像未显示,因此似乎无法正常工作。
i是无效的SVG。您需要包括显示图标的实际字符。如果您查看fontawesome的样式表,您将看到…
i
.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中,您需要将example的语法更改\f040为:
\f040
<g><text x="0" y="0"></text></g>
然后在样式表中添加:
svg text { font-family: FontAwesome; }