甚至在vis.js示例中呈现为正方形的字体令人敬畏的图标

我正在研究应用程序，该应用程序应将某些数据可视化并将其显示为图形。为了做到这一点，我选择了vis.js和FontAwesome（两个都是最新版本，从CDN加载），因为我也想展示一些图标。让我们假设我的图形与vis.js示例中提供的this one类似。我已经意识到，示例的第一行标签对于渲染非常重要。甚至在vis.js示例中呈现为正方形的字体令人敬畏的图标

<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先生

<!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贴在下面的jsfiddle提前

来源

2016-09-13 amsalk

你可以发布一个链接到你的应用程序或代码片段吗？红外可能是一个字符集问题 – kaosmos

是的，我有同样的问题。我通过首先加载fontAwesome文件解决了这个问题。 –

这可能会帮助你http://stackoverflow.com/questions/14366158/font-awesome-not-working-icons-showing-as-squares – MKB

的字体没有加载完成。

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

就在您的网络格放一个无形的图标：

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

这使的伎俩！

来源

2016-09-13 16:23:41 Jorgeblom

你好，thx回复。是的，你是对的，它的确有诀窍，而且绝对是更微妙的方式来做到这一点，但仍然存在与渲染相同的问题。即使您有图标和页面刷新，图表中的图标也可能不会被加载。在我看来，我将不得不接受这种行为，并与之共存:) – amsalk

甚至在vis.js示例中呈现为正方形的字体令人敬畏的图标

回答

相关问题