Font-awesome icons are not rendered in example page

[ax1]

In the documentation at https://visjs.github.io/vis-network/examples/network/nodeStyles/customGroups.html the FA icons are not properly displayed. I changed to https:...fontawesome css in firefox and seemed to solve it but in chrome browser the problem is the same. Also tested using `document.addEventListener("DOMContentLoaded",...) in a local page but same results.

[ax1]

issue #163 contains a link to https://visjs.github.io/vis-network/examples/network/nodeStyles/icons.html where fa-icons (v4 and v5) are displayed, I will try that code instead.

Anyway having a look/fix at the first URL would be great since we cannot pull-request to gh-pages (doc says that non-master PRs will be closed). The example pages are very convenient as templates.

Thanks.

[ax1]

Ok, document.fonts.load('normal normal 400 24px/1 "FontAwesome"').then(paint).catch(console.error) solves the problem.

For those reading the issue, you can also use the newer fa version 5 in icons.html.

(I leave the issue as open for some days, just in case any contributor wants to update the customGroups example file.)

[Steven0706]

https://jsfiddle.net/api/post/library/pure/ can someone please help fix this example? having the same issue but not sure how above solution can be applied to here.

[nook24]

I have a similar issue because Vis uses regular icons by default until you click on a icon it switches to solid. This happens if I add a shape like dot. Unfortunately this only works, if an icon has an regular version, which not all icons have.

For example: fa-regular fa-circle-user by default and fa-solid fa-circle-user if I click on the icon

I clicked on the left user icon, and it is now the solid version:

In this example, no regular icon is available:

If I click on the icon, Vis changes to the solid/bold icon, and it works:

This is my config

  users: {
      shape: 'dot',
      color: '#800080',
      size: 15,
      icon: {
          face: '"Font Awesome 6 Free"',
          code: '\uf2bd', // exists as solid and regular
          color: '#ffffff',
          size: 5,
          weight: 'bold'
      }
  },
 usercontainerroles: {
      shape: 'dot',
      color: '#800080',
      size: 15,
      icon: {
          face: '"Font Awesome 6 Free"',
          code: '\uf0c0', // only exists as solid (in Font Awesome Free)
          color: '#ffffff',
          size: 5,
          weight: 'bold'
      }
  },

Can i somehow force Vis to always use the solid icons and not the regular font?

I think this relates to #139 or #1508

[nook24]

I found a simple solution for the solid / regular issue by using the font family Font Awesome 6 Free Solid instead of Font Awesome 6 Free

 shape: 'dot',
  color: '#800080',
  size: 15,
  icon: {
      face: '"Font Awesome 6 Free Solid"',
      code: '\uf0c0',
      color: '#ffffff',
      size: 5,
      weight: "900",
  }