Question

我正在开发一款可视化某些数据并将其显示为图表的应用。为了能够做到这一点，我选择使用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>

提前谢谢

Answer 1

在您的页面中使用该字体之前，该字体尚未加载并准备就绪。

因此，正如Vis.js网站提供的示例一样，在DOM中插入一个图标，然后就可以了。

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

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

这就是诀窍！

即使在vis.js示例中，font-awesome图标也呈现为正方形

1 个答案: