CSS 如何在我的 svg 中包含字体真棒图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14984007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I include a font awesome icon in my svg?
提问by user_78361084
I have an svg that includes images:
我有一个包含图像的 svg：
<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.
由于图像未显示，因此似乎不起作用。
回答by methodofaction
iis not valid SVG. You need to include the actual character that displays the icon. If you take a look at font awesome's stylesheetyou will see...
i不是有效的 SVG。您需要包含显示图标的实际字符。如果你看一下font awesome 的样式表，你会看到......
.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"; }
But those are unicode characters encoded for CSS. In SVG you would need to change the syntax of example \f040to:
但那些是为 CSS 编码的 unicode 字符。在 SVG 中，您需要将示例的语法更改\f040为：
<g><text x="0" y="0"></text></g>
And then in your stylesheet add:
然后在您的样式表中添加：
svg text {
font-family: FontAwesome;
}
回答by WebBrother
my Demo
我的演示
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div title="Code: 0xe800" class="the-icons span3">
<H3>Standard using:</H3>
<i class="fa fa-camera-retro fa-4x"></i>
<br>
<H3>SVG using:</H3>
</body>
</html>
JS
JS
var svg = d3.select("body")
.append("svg")
.attr("width", 250)
.attr("height", 250);
svg.append("text")
.attr("x",0)
.attr("y",70)
.attr("font-family","FontAwesome")
.attr('font-size', function(d) { return '70px';} )
.text(function(d) { return '\uf083'; });
