[英]font-awesome icons rendered as squares even in vis.js example
我正在開發一款應可視化一些數據並將其顯示為圖形的應用程序。 為了做到這一點，我選擇使用vis.js和FontAwesome （它們都是從CDN加載的最新版本），因為我也想顯示一些圖標。 讓我們假設我的圖表看起來類似這一個在所提供的vis.js例子。 我已經意識到示例的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>
提前Thx
直到在頁面中使用字體后，字體才會加載並准備就緒。
因此，作為Vis.js網站提供的示例，在DOM中插入一個圖標，然后它就可以工作。
在您的網絡div之前放置一個不可見的圖標：
<i class="fa fa-flag" style="visibility:hidden;"></i>
這使竅門！
font-awesome 使用 React 和 Webpack 不顯示圖標（僅正方形）
[英]font-awesome not showing icons (only squares) with React and Webpack
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.