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

当我使用＆amp;＃xf0c5;要显示它，它只显示一个小错误方块。那是因为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
}

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

还是通过<img>等导入？

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

use FontAwesome icon in svg without external files

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

1 个答案: