在SVG中使用FontAwesome图标而不需要外部文件

Question

在SVG中使用FontAwesome图标而不需要外部文件

csssvgincludeiconsfont-awesome

10

我需要用PHP和/或JavaScript创建一个SVG，其中一些SVG元素是来自FontAwesome的图标，但是：没有外部依赖项（比如：导入CSS文件等）。

我发现这个stackoverflow问题与我的问题类似，但是并不适用于我的问题，因为有外部依赖项，例如在显示svg的网页上添加FontAwesome（CSS文件）。

区别在于，我需要一个全能SVG，其中所有必要的FontAwesome定义都是SVG的一部分，因为用户应该能够下载生成的SVG并使用SVG查看器或编辑器继续处理它。

有没有办法将（例如）一个“Font Awesome”图标的定义放入一个SVG中？

我找到了这个（可能是）SVG信息列表。所以看起来，可以将图标路径作为SVG代码提供。那么我该如何在SVG中使用这个呢？

//更新：我找到了以下示例，但我不知道如何包含FontAwesome定义以及如何访问图标 :-(

<?xml version="1.0" standalone="yes"?>
<svg width="100%" height="100%" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
    <font id="Font2" horiz-adv-x="1000">
      <font-face font-family="Super Sans" font-weight="normal" font-style="italic"
          units-per-em="1000" cap-height="600" x-height="400"
          ascent="700" descent="300"
          alphabetic="0" mathematical="350" ideographic="400" hanging="500">
        <font-face-src>
          <font-face-name name="Super Sans Italic"/>
        </font-face-src>
      </font-face>
      <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
      <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
      <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
      <!-- more glyphs -->
    </font>
  </defs>
</svg>

- The Bndr

1个回答

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

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

- methodofaction · Accepted Answer

你的示例是一个SVG字体，不能在IE或Firefox上工作。如果您希望它可以在任何地方使用，您需要将FontAwesome编码为数据URI并嵌入到@font-face中：

<svg width="500" height="200" version="1.1" xmlns = 'http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200">  
    <defs>
      <style type="text/css">
        @font-face {
          font-family: 'FontAwesome';
          src: url(data:font/opentype;base64,[...]) format('opentype');
        }
      </style>
    </defs>
    <rect x="0" y="0" height="100" width="500" fill="#eee" />
    <text x="20" y="50" font-family="FontAwesome" font-weight="normal" font-size="32">
      &#xf007
    </text>
  </svg>

将[...]替换为字体的base64编码版本。您可以将.ttf或.otf文件上传到base64服务或命令行openssl base64 -in <infile> -out <outfile>。

如果您想对FontAwesome库进行子集处理，可以前往icomoon http://icomoon.io/app/#library并添加FontAwesome库。然后选择您需要的图标，下载zip文件，然后将ttf上传到像这样的base64编码服务http://www.opinionatedgeek.com/dotnet/tools/base64encode/，并将所得字符串粘贴到src:font-face声明中。