【发布时间】：2017-01-21 01:22:04
【问题描述】：
我正在开发一个应用程序，它应该可视化一些数据并将其显示为图表。为了能够做到这一点，我选择使用 vis.js 和 FontAwesome（它们都是最新版本，从 CDN 加载），因为我也想显示一些图标。让我们假设我的图表类似于vis.js 示例中提供的this one。我已经意识到示例的第一行body标签对于渲染很重要。
<i class="fa fa-flag"></i> We use an icon once in the DOM so the CSS for fontAwesome is loaded.
只要我删除或隐藏它，图标就会呈现为正方形。此外，如果我把它留在那里，并不意味着在每种情况下都会呈现图标。尝试使用组合 CTRL+SHIFT+R（也就是忽略兑现的内容）将我上面提出的示例刷新 10-20 次，您可能会遇到和我一样的问题。
所以我想知道你们中是否有人以前遇到过这个问题，有什么解决方法吗？我希望能够只呈现图形，并确保无论何时何地刷新页面（F5、CTRL+F5、CTRL+SHIFT+R 等）图标都会在那里。
编辑 在这里你可以看到我正在使用哪些链接以及它的外观。和下面Polywhirl先生发的jsfiddle很像
<!DOCTYPE html>
<html>
<head>
<title>Network Graph Renderer</title>
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.js"></script>
</head>
<body>
<i class="fa fa-flag"></i> We use an icon once in the DOM so the CSS for fontAwesome is loaded.
<div id="network"></div>
<script type="text/javascript">
// vis.js options, ajax etc.
</script>
</body>
</html>
提前谢谢
【问题讨论】：
-
您可以发布指向您的应用程序的链接或代码片段吗？ ir 可能是字符集问题
-
是的，我遇到了同样的问题。我通过先加载 fontAwesome 文件解决了这个问题。
-
@MKB 是的，我已经看到了。接受的答案已经过时，因为字体真棒版本 4.x.x 一个 cdn 链接应该足以提供所有必需的资产。
-
@MKB 这不是 font not found 问题，而是 rendering 问题。
标签： javascript font-awesome vis.js