'font-awesome icons losing css style after nuxt generate

So, I have a problem and am not sure where to start. I am working static site project built using nuxt, vue, and vuetify. Everything works great and looks good, until I run nuxt generate. After that when I go to view the final static site, I lose my styling on my font-awesome icons. The first image below is what I have when running on my localhost. enter image description here

In the photo, you can see the size of the magnifying glass and star. This is perfect. However, the next photo is after I run nuxt generate

enter image description here

I am at a loss here as to what would be causing this, and any direction would be greatly appreciated.

EDIT

After looking at the devtools again from a comment, the icons have the same CSS styles, and I do not see a difference. However, further back in the elements I have a div that is getting rendered differently, which could be breaking things. enter image description here

The CSS circled at the top is my local environment. You can see that .evidenceReview{} has the active background, which is overriding .theme--light.v-card{}. In the bottom circled CSS is what I get from my deployment. Here you can see that the same classes exist, it's just that the presence is switched and .theme--light.v-card{} is overriding .evidenceReview{}.

cssvue.jsnuxt.jsfont-awesome


Solution 1:[1]

As workaround, importing the font-awesome css at the top of my css file worked.

@import '@fortawesome/fontawesome-svg-core/styles.css';

Workaround taken from FontAwesome GitHub issue: https://github.com/FortAwesome/Font-Awesome/issues/18666#issuecomment-1090686913

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BibekStha

Related Questions