1

We wanted to update all our used libs in our Node.js/Nuxt/Vue application. And so we arrived at Font Awesome.

Before the update we used:

"@fortawesome/fontawesome-svg-core": "1.2.30",
"@fortawesome/free-brands-svg-icons": "5.14.0",
"@fortawesome/pro-regular-svg-icons": "5.14.0",

And we updated them to:

"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/pro-regular-svg-icons": "^6.1.1",

I include here a screenshot of the before and after result of our left menu.

enter image description here

The encircled items should have unique icons like the left version. However in some occasions it renders wrong icons, it looks likes it takes the icon from the item above.

In developer tools the HTML for one menu item with a wrong icon looks like the following: enter image description here

You see the correct class in the icon element but the svg element somehow gets the class from the menu item above it. It should use the fa-cogs and not the fa-chart-line.

I want to point out that we did not change anything code wise.

Did anyone encounter something similar after updating the font awesome libs? Or knows a solution to this problem?

Filip Huysmans
  • 1,301
  • 1
  • 20
  • 44
  • What's the difference between the 2nd and 3rd column here? Also, do you have any info in your vue devtools (inspecting each icon component). Can also be an OS issue (encoding of some chars etc), try it on something else for some efficient debugging. Also, maybe try to isolate which icons are buggy (here you have 3, maybe try to use only 1). Otherwise, a [repro] could help quite a lot too. – kissu May 05 '22 at 10:11
  • @kissu You can see in the 2nd column that it loads the correct icons but it shows this weird rectangle right before some of the actual icons. In the 3rd column it shows the wrong (double) icons. What kind of info should I be looking for in the vue devtools ? – Filip Huysmans May 05 '22 at 10:31
  • It doesn't really answer my question: what are the difference between those 2 columns? One is used in some place and the other in another place? Different page for a navbar? I can see the icons but the context around it is quite important. My previous points still stand (previous comment). As for the devtools, I was mainly suggesting to check all the icon components and try to find something strange down there (not sure exactly what, but just to be sure even if it's probably not coming from your structure). Oh, do you maybe use some `id="whatever-icon"` somewhere? Pay attention to uniqueness. – kissu May 05 '22 at 11:56
  • Otherwise, a solution [like this](https://stackoverflow.com/a/72055404/8816585) may be more universal and could maybe strip the issue (it's maybe just a configuration thing). This works with Nuxt3 but with anything else really. – kissu May 05 '22 at 13:16
  • 2
    @FilipHuysmans Can you share a link to a reproduction of the problem? – tony19 May 05 '22 at 21:33

0 Answers0