为什么 fontawesome 图标没有出现在我的 svg 中？

Question

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

例如，看一下这个 post 上的第一张 svg 图片： http://falconair.github.io/2015/01/05/financial-exchange.html

有红色和绿色 "SELL" 和“购买”字样的价格和一堆盒子，实际上应该是简笔画和其他图标，如下所示：

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

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

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

Answer 1

Link font awesome 在线到你的项目试试...

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

Answer 2

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

在一般意义上，您还需要包含 SVG 中的 FontAwesome CSS 文件。

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

您需要使用的解决方案是在您的 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

为什么 fontawesome 图标没有出现在我的 svg 中？

Why aren't fontawesome icons showing up in my svg?

html

css

svg

font-awesome