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

Question

I am working on an app which should visualize some data and show it as a graph. 我正在开发一款应可视化一些数据并将其显示为图形的应用程序。 To be able to do this, I have chosen to work with vis.js and FontAwesome (both of them latest versions, loaded from CDNs), since I would like to show some icons too. 为了做到这一点，我选择使用vis.js和FontAwesome （它们都是从CDN加载的最新版本），因为我也想显示一些图标。 Lets assume that my graph looks similar to this one provided in the vis.js examples. 让我们假设我的图表看起来类似这一个在所提供的vis.js例子。 I have realized that the first line the body tag of the example is important for rendering. 我已经意识到示例的body标签的第一行对于渲染很重要。

<i class="fa fa-flag"></i> We use an icon once in the DOM so the CSS for fontAwesome is loaded.

As soon as I remove it or hide it, icons will be rendered as squares. 一旦删除或隐藏它，图标将被渲染为正方形。 Furthermore if I leave it there it does not mean that the icons will be rendered in every case. 此外，如果我将其保留在此处，并不意味着在每种情况下都将渲染图标。 Try to refresh 10-20 times the example I've posed above by using the combination CTRL+SHIFT+R (aka. ignore cashed content) and you will probably end up with the same issue like I did. 尝试使用CTRL + SHIFT + R组合刷新我上面提出的示例的10到20倍（也就是忽略现金内容），您可能会遇到与我相同的问题。

So I would like to know if anyone of you have faced this issue before and is there any workaround? 因此，我想知道您中是否有人曾经遇到过此问题，是否有任何解决方法？ I would like be able to render graph only and to make sure that whenever and however the page gets refreshed (F5, CTRL+F5, CTRL+SHIFT+R etc.) icons will be there. 我只希望呈现图形，并确保无论何时何地刷新页面（F5，CTRL + F5，CTRL + SHIFT + R等）的图标都会在那里。

EDIT Here can you see which links I am using and how it looks like. 编辑在这里，您可以看到我正在使用哪些链接以及它的外观。 It is quite similar to the jsfiddle posted below by Mr. Polywhirl 它与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 in advance 提前Thx

Answer 1

The font is not loaded and ready until you use it in your page. 直到在页面中使用字体后，字体才会加载并准备就绪。

So, as the example provided by Vis.js website, insert an icon in the DOM and then it works. 因此，作为Vis.js网站提供的示例，在DOM中插入一个图标，然后它就可以工作。

Just before your network div put an invisible icon: 在您的网络div之前放置一个不可见的图标：

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

This makes the trick! 这使窍门！

即使在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