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

Posted 2023-03-06

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

【英文标题】：use FontAwesome icon in svg without external files

【发布时间】：2013-08-16 01:32:53

【问题描述】：

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

我找到了this*** 问题，这是一个类似的主题，但不适合我的问题，因为存在外部依赖项，例如在显示 svg 的网页上添加 FontAwesome（CSS 文件）。

不同之处在于，我需要一个一体化 SVG，其中所有必要的 FontAwesome 定义都是 svg 的一部分，因为用户应该能够下载生成的 SVG 以继续使用 svg 查看器进行处理或编辑。

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

我找到了this（可能）svg 信息列表。所以看起来，图标路径可以作为 SVG 代码使用。那么如何在 svg 中使用它呢？

---

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

<?xml version="1.0" standalone="yes"?>
<svg   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- x-
          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>

【参考方案1】：

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

<svg   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"   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: 字体声明中。

【讨论】：

谢谢。这很好用。神奇：你为什么知道这么特别的事情？问候普拉亚德尔卡门。顺便说一句：那里的好地方！ :-)

对您的回答还有一个问题：base64 编码的东西@fontawesome.css 将添加所有图标。有没有办法只添加一个图标？ （你的回答有效，这个额外的问题更好，以保持文件小）

我已经更新了答案以允许对 FontAwesome 的库进行子集化。如果您需要多次执行此操作，那么您需要一个命令行脚本来完成。感谢您的问候，非常感谢这种冷漠的工艺:)

不幸的是，这个要点不再可用

谢谢@AndrewEisenberg 我已经包含了自己编码的说明。