如何在我的svg中添加超棒的字体图标？

我有一个包含图像的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>

由于图像未显示，因此似乎无法正常工作。

css svg font-awesome

— user_78361084
source

您需要从svg获取字形元素。

— 大卫，

我发现这个解决方案最好：stackoverflow.com/questions/11243677/...

— 詹姆斯氏族

Answers:

120

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"; }

但是这些是为CSS编码的unicode字符。在SVG中，您需要将example的语法更改\f040为：

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

然后在样式表中添加：

svg text {
   font-family: FontAwesome;
}

— 行动方法
source

要拥有带有嵌入字体的独立SVG，您需要将字体作为数据uri嵌入，如果需要详细信息，请打开一个新问题。

— methodofaction 2013年

由于某种原因，它对我不起作用。我有<g class="info-container" transform="translate(240,283)"><text class="svg-icon" x="-60" y="0">&#xf040</text></g>风格，.svg-icon { font-family: FontAwesome; }但这无济于事。FontAwesome.css附加到页面。并且图标显示为文本。为什么这样？

— sedovav 2014年

@sedovav：这是我必须做的才能使其在d3.js中工作。stackoverflow.com/a/12883617/127203。基本上，文本应为“ \ uf040”。

— Glenn 2015年

@Glenn u da真正的MVP！

— 朱姆

@Glenn-也许您应该编辑答案-\ u有效，而＆x绝对无效。

— manassehkatz-Moving 2 Codidact

我的演示

<!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>

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'; });

— Web兄弟
source

感谢使用function（d）的示例{return'\ uf083'; }，花了我一段时间才找到此解决方案。

— NPC

当我尝试使用window.btoa保存此svg时，出现错误Uncaught DOMException：无法在“ Window”上执行“ btoa”：要编码的字符串包含Latin1范围之外的字符。（…）

— Jerry

谢谢，但是我想知道使用HTML实体和D3jstext函数将字符串添加到HTML元素之间有什么区别？就像'\ uf083'和＆＃xf083

— 艾伦（Allen）

这似乎不适用于所有代码\ uf185 \ uf186 \ uf763 \ uf7ad

— HaBo 2012年