如何在我的SVG中包含一个Font Awesome图标？

Question

如何在我的SVG中包含一个Font Awesome图标？

77

我有一个包含图片的svg：

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

我该如何用一个 Font Awesome 图标替换那一行：

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

似乎不起作用，因为图像未显示出来。

- user_78361084

你需要从SVG中获取字形元素。 - David

1

我发现这个解决方案最好用：https://stackoverflow.com/questions/11243677/how-can-i-display-html-within-an-svg-document - James Gentes

3个回答

27

我的演示

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

JavaScript

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

- WebBrother

3

感谢您提供了 function(d) { return '\uf083'; } 的示例，我找了很久才找到这个解决方案。 - NPC

当我试图使用window.btoa保存这个svg时，我遇到了一个错误未捕获的DOM异常：无法在“Window”上执行“btoa”：要编码的字符串包含拉丁1范围之外的字符。（...）。 - Jerry

谢谢，但我想知道在使用HTML实体和D3js text函数将字符串添加到HTML元素时的区别是什么？例如'\uf083'和&#xf083。 - Allen

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

0

以下代码对我来说完美运行。

   svg.append('tspan')
        .attr('class', 'fa')
        .text('\uf05a')

- Ajay Gangisetti

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- methodofaction · Accepted Answer

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中，您需要将示例\f040的语法更改为：

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

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

svg text {
   font-family: FontAwesome;
}

根据尼克的评论，如果您使用免费版本的Font Awesome 5+，则必须使用以下字体族声明：

font-family: "Font Awesome 5 Free";

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