为什么我的svg中没有显示出令人遗憾的图标？

Question

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

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

哪里有红色和绿色＆＃34;卖出＆＃34;并购买＆＃34;价格和一堆盒子的话，实际上应该是棒图和其他图标如下：

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

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

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

Answer 1

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

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

然而它并不那么简单，因为您将SVG包含为<img>。浏览器具有隐私限制，不允许嵌入<img>的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

Answer 2

将字体在线链接到您的项目并尝试...

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