Menu
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. Lets assume that my graph looks similar to this one provided in the vis.js examples. I have realized that the first line the body tag of the example is important for rendering.
<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.
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.
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
<!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
203
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.
Just before your network div put an invisible icon:
<i class="fa fa-flag" style="visibility:hidden;"></i>
This makes the trick!
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
