即使在vis.js示例中，字体真棒图标也呈现为正方形

Question

我正在开发一款应可视化一些数据并将其显示为图形的应用程序。 为了做到这一点，我选择使用vis.js和FontAwesome （它们都是从CDN加载的最新版本），因为我也想显示一些图标。 让我们假设我的图表看起来类似这一个在所提供的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等）的图标都会在那里。

编辑在这里，您可以看到我正在使用哪些链接以及它的外观。 它与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>

提前Thx

Answer 1

直到在页面中使用字体后，字体才会加载并准备就绪。

因此，作为Vis.js网站提供的示例，在DOM中插入一个图标，然后它就可以工作。

在您的网络div之前放置一个不可见的图标：

<i class="fa fa-flag" style="visibility:hidden;"></i>

这使窍门！

即使在vis.js示例中，字体真棒图标也呈现为正方形

问题描述

1 个解决方案

解决方案1
0 2016-09-13 16:23:41

即使在vis.js示例中，字体真棒图标也呈现为正方形

问题描述

1 个解决方案

解决方案1 0 2016-09-13 16:23:41

解决方案1
0 2016-09-13 16:23:41