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

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

javascript

Javascript 即使在vis.js示例中，字体图标也呈现为正方形,javascript,font-awesome,vis.js,Javascript,Font Awesome,Vis.js,我正在开发一个应用程序，它可以将一些数据可视化并以图形的形式显示出来。为了做到这一点，我选择了使用vis.js和FontAwesome（它们都是最新版本，从CDN加载），因为我也想显示一些图标。让我们假设我的图与vis.js示例中提供的图相似。我意识到示例的body标记的第一行对于渲染很重要我们在DOM中使用一次图标，以便加载fontAwesome的CSS。一旦我移除或隐藏它，图标将被渲染为正方形。此外，如果我把它留在那里，这并不意味着图标将在任何情况下呈现。尝试使用CTRL+SHIFT+R

我正在开发一个应用程序，它可以将一些数据可视化并以图形的形式显示出来。为了做到这一点，我选择了使用

vis.js

和

FontAwesome

（它们都是最新版本，从CDN加载），因为我也想显示一些图标。让我们假设我的图与

vis.js

示例中提供的图相似。我意识到示例的body标记的第一行对于渲染很重要

我们在DOM中使用一次图标，以便加载fontAwesome的CSS。

一旦我移除或隐藏它，图标将被渲染为正方形。此外，如果我把它留在那里，这并不意味着图标将在任何情况下呈现。尝试使用CTRL+SHIFT+R组合（也称为“忽略现金内容”）将我上面提出的示例刷新10-20次，您可能会遇到与我相同的问题

所以我想知道你们中是否有人曾经遇到过这个问题，有没有解决办法？我想能够呈现图形只，并确保无论何时和如何页面得到刷新（F5，CTRL+F5，CTRL+SHIFT+R等）图标将在那里

编辑在这里你可以看到我使用的链接以及它的外观。这与下面由Polywhill先生发布的内容非常相似

<!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>


网络图渲染器
我们在DOM中使用一次图标，以便加载fontAwesome的CSS。
//vis.js选项、ajax等。

Thx提前

在页面中使用字体之前，字体不会加载并准备就绪

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

在network div之前放置一个不可见的图标：

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

这就是诀窍

你可以发布应用程序的链接或代码片段吗？ir可能是一个字符集问题是的，我也有同样的问题。我通过先加载fontAwesome文件解决了这个问题。这可能会帮助您@MKB是的，我已经看到了。接受的答案已过时，因为font awesome版本4.x.x one cdn链接应足以提供所有必需的资源。@MKB这不是font not found问题，而是呈现问题。您好，请回答thx。是的，你是对的，它确实起到了作用，而且确实是一种更微妙的方式，但渲染仍然存在同样的问题。即使有图标和页面刷新，图形中的图标也可能无法加载。在我看来，我将不得不接受这种行为并接受它：）有同样的问题：），你解决了吗？