3

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.

enter image description here

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

ajaysinghdav10d
  • 1,771
  • 3
  • 23
  • 33
amsalk
  • 577
  • 1
  • 5
  • 23
  • can you post a link to your app or a code fragment? ir could be a charset problem – kaosmos Sep 13 '16 at 12:28
  • Yes, I had the same problem. I fixed the issue by loading the fontAwesome file first. – Punith Mithra Sep 13 '16 at 12:29
  • this may help you http://stackoverflow.com/questions/14366158/font-awesome-not-working-icons-showing-as-squares – MKB Sep 13 '16 at 12:29
  • Here is a fiddle: https://jsfiddle.net/MrPolywhirl/c9t6hwdu/ If you zoom in/out the font will render correctly. You want it to show immediately? – Mr. Polywhirl Sep 13 '16 at 12:31
  • @Mr. Polywhirl yes, I've managed to achieve the same, must not be zoom. even if you just move it the same will happen and yes I would like to show it immediately – amsalk Sep 13 '16 at 12:33
  • 1
    @MKB yes, I've already seen that. The accepted answer is outdated and since the font-awesome version 4.x.x one cdn link should be enough to provide all required assets. – amsalk Sep 13 '16 at 12:35
  • I also got the same problem which was fixed by replacing the url in font-awesome.css file with the path to `/font` folder – MKB Sep 13 '16 at 12:39
  • 2
    @MKB This is not a *font not found* issue, it's a *rendering* issue. – Mr. Polywhirl Sep 13 '16 at 12:40

1 Answers1

2

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!

Jorgeblom
  • 3,330
  • 1
  • 23
  • 24
  • Hello, thx for reply. Yes, you're right it does the trick and is definitely more subtle way to do this but still there is the same problem with rendering. Even if you have the icon and page refreshes, icons in the graph might not be loaded. It seems to me that I'll have to accept this behavior and live with it :) – amsalk Sep 14 '16 at 07:11
  • have the same issue :), did u solve it somehow ? – Igor Pavlenko Mar 29 '21 at 14:05