甚至在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示例中呈現爲正方形的字體令人敬畏的圖標

回答

相關問題