将 FontAwesome 中的图标添加到 SVG <text>答案

【问题标题】：Add icon from FontAwesome to SVG <text>将 FontAwesome 中的图标添加到 SVG <text>
【发布时间】：2016-10-31 10:55:11
【问题描述】：

我正在尝试让 FontAwesome 中的图标在我的 SVG 中工作。据我所知，SVG 不支持通常使用的标签。那么如何让图标显示出来呢？

部分代码：

<g id="symbolsContainer">
    <symbol class="icon icon-" id="icon-1" viewBox="0 0 40 40">
        <text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">&#xf0c5;</text>
    </symbol>
</g>

样式表：

svg text {
    font-family: FontAwesome;
}

当我使用  ;要显示它，它只显示一个小的误差方块。那是因为没有正确包含 FontAwesome 吗？

我尝试使用<path>，它可以工作，但没有找到所需的图标。

【问题讨论】：

How do I include a font awesome icon in my svg?的可能重复
@Turnip 我检查了，但它并没有解决我的问题，即使你是一样的..因此我创建了一个新的..
要具体。该线程中的解决方案有什么问题？
好吧。图标不显示。我在另一个线程中遵循了解决方案。 gyazo.com/71d92b76274ec73d694d8a213f5dd15c那个小方块是唯一出现的东西——
是的。您没有向我们展示您解决问题的尝试或解释它们如何不起作用。所有这些都应该在您的问题中。否则，您的问题与上面链接的问题完全相同。

标签： svg icons

【解决方案1】：

你是如何使用 SVG 的？

它是否内联在 HTML 中？

如果是这样，你如何告诉浏览器在哪里可以找到字体？如果 FontAwesome 字体不在系统字体文件夹中，则需要在 FontAwesome CCS 文件顶部包含 @font-face 声明。

@font-face {
  font-family:'FontAwesome';
  src:url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
      url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
      url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),
      url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
      url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight:normal;
  font-style:normal
}

并确保所有这些字体都包含在您的网站中并且网址正确。

还是通过<img> 等导入？

如果是这样，那么您需要在 CSS 中包含部分或全部字体文件作为数据 URI。有关详细信息，请参阅以下问题：

use FontAwesome icon in svg without external files

【讨论】：

它在 html 中内联.. 哇。我完全忘记了我没有将字体保存到项目中的文件夹中。感谢您指出！很抱歉这个问题。我是新手。有时我会跳过重要信息。 :/ 祝你好运