为什么我的 svg 中没有显示 fontawesome 图标？答案

【问题标题】：Why aren't fontawesome icons showing up in my svg?为什么我的 svg 中没有显示 fontawesome 图标？
【发布时间】：2016-04-11 08:40:36
【问题描述】：

我有一个奇怪的图标问题（来自 fontawesome）没有出现在我的 svg 中。它们总是出现在我的本地计算机上，所以很长一段时间我都没有意识到其他人有问题。

例如，看看这篇文章的第一张 svg 图片： http://falconair.github.io/2015/01/05/financial-exchange.html

在有红色和绿色的“SELL”和“BUY”字样以及价格和一堆盒子的地方，实际上应该有简笔画和其他图标，如下所示：

其中一个缺少的图标是： http://fortawesome.github.io/Font-Awesome/icon/male/

在 css 中，我包含了 fontawesome css。在 svg 中，我使用了相关的 unicode 字符。事实上，第一张图片有一个巨大的 \uf183，因为我试图输入 unicode 而不是粘贴字符。

关于我在这里做错了什么有什么想法吗？我显然不是网络开发人员，我创建图像是为了说明一个观点，现在我不得不花更多的时间摆弄图像而不是实际内容。

【问题讨论】：

有机会在这里发布 HTML 和 CSS 吗？没有它很难说。此外，请检查控制台以查看 fontawesome.css 上是否有 404。最后。它是 \f183...不是 \uf183 ...就我而言

标签： html css svg font-awesome

【解决方案1】：

您的 SVG 是作为 <img> 导入的外部文件。它不知道您的 HTML 文件链接到了一个 FontAwesome CSS 文件。

一般来说，您还需要从 SVG 中包含 FontAwesome CSS 文件。

然而它并不那么简单，因为您将 SVG 作为<img> 包含在内。浏览器有隐私限制，不允许嵌入为 <img>s 的 SVG 引用其他外部资源。它们必须独立。

您需要使用的解决方案是在 SVG 中包含 <style> 元素，并将 FontAwesome TTF 字体作为数据 URI 嵌入。

<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>
    ...etc...

见：use FontAwesome icon in svg without external files

【讨论】：

【解决方案2】：

将 font Awesome 在线链接到您的项目并尝试...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

【讨论】：