将图标从FontAwesome添加到SVG <text>

Question

我试图让图标从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>，它工作了，但是没有找到所需的图标。

Answer 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
}

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

还是通过<img>等导入?

如果是这样，那么您需要在CSS中包含一些或所有字体文件作为Data uri。有关更多信息，请参阅以下问题:

在没有外部文件的svg中使用FontAwesome图标