search

wufe / react-particles-js

Particles.js for React
https://rpj.bembi.dev/
MIT License
1.15k stars 106 forks source link

I cant use fontAwesome #134

Closed Roman-Cecile closed 4 years ago

Roman-Cecile commented 4 years ago

Hello, i'm trying to use fontawesome with react particle js with this code: 

"shape": {
      "character":  [
      {
        "fill": true,
        "font": "Font Awesome 5 Brand",
        "style": "",
        "value": ["\uf179", "\uf38b", "\uf3b9", "\uf13b", "\uf1cb"],
        "weight": "400"
      }
    ],

but the result is just white rectangle. If i write letter or word it's works. I've installed fontawesome, with yarn, put the cdn in my html etc...

I know i'am making something wrong but i can't find it since few days !

can you gime me some advises please ?

Thank you for your reply

matteobruni commented 4 years ago

Hello @Roman-Cecile

The first issue is in your config, the font property ends with Brands instead of Brand.

But the main issue is with dynamic font loading.

document.fonts
  .load(`400 36px 'Font Awesome 5 Brands'`); //returns a Promise

This is the code used by the library to load external fonts. I tried it in code sandbox and it doesn't seem to work in ReactJS.

This will require further investigation, if you know a method to load fonts in ReactJS try that, maybe it will fix this issue.

I did a workaround here:

https://codesandbox.io/s/ecstatic-bhaskara-1qsl7?file=/public/index.html

Calling the fonts loading in the index.html using just vanilla javascript, if you need more fonts, you have to repeat the load function for every external font.

Roman-Cecile commented 4 years ago

Ogm... the error was "brand"... i'm so sorry. than you very much for you fast reply. sometimes it's good to take a break, i guess...

Thanks again