我正在开发一个应用程序，它应该可视化一些数据并将其显示为图表。为了能够做到这一点，我选择使用 vis.js和 FontAwesome (它们都是最新版本，从 CDN 加载)，因为我也想展示一些图标。让我们假设我的图表看起来类似于 this one在 vis.js 中提供例子。我已经意识到示例的第一行 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 等)图标都会出现。
编辑 在这里您可以看到我正在使用哪些链接以及它的外观。它与 jsfiddle 非常相似下面由 Polywhirl 先生发布
<!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>
提前致谢
最佳答案
在您在页面中使用字体之前，该字体不会加载并准备就绪。
所以，按照Vis.js网站提供的例子，在DOM中插入一个图标就可以了。
就在你的网络 div 之前放置一个不可见的图标:
<i class="fa fa-flag" style="visibility:hidden;"></i>
这就是诀窍!
关于javascript - 即使在 vis.js 示例中，字体超棒的图标也呈现为正方形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39470062/