search

FortAwesome / vue-fontawesome

Font Awesome Vue component
https://fontawesome.com
MIT License
2.39k stars 133 forks source link

Fontawesome is being purge after building in nuxt #349

Closed phojie closed 2 years ago

phojie commented 2 years ago

Describe the bug Fontawesome icons is not recognized in production mode

Desktop (please complete the following information):

sheldonbaker commented 2 years ago

Happening for me too.

GuasaPlay commented 2 years ago

Happens to me too :C

Purge all classes even though it is already specified in the whitelistPatterns

nuxt.config.js file

...
  purgeCSS: {
    whitelistPatterns: [/svg.*/, /fa.*/],
  },
...
robmadole commented 2 years ago

Hey, can you all double-check that you are using the @fortawesome/vue-fontawesome package? If it's vue-font-awesome (with a space after font) that's a different project than this one.

bhuvidya commented 2 years ago

Same thing is happening for me. Loading fine on local dev, but not loading on a SSR build on live server. Html has the fa-icon element "untouched":

<fa-icon icon="far,copy" class="copy-icon"></fa-icon>

Any help greatly appreciated.

Nuxt 2.15.8 @nuxtjs/fontawesome: ^1.1.2 @fortawesome/free-regular-svg-icons: ^6.1.1 @fortawesome/vue-fontawesome: 0.1.10 (via @nuxtjs/fontawesome)

bhuvidya commented 2 years ago

Ok I found it - the "suffix" config option for @nuxtjs/fontawesome had to be explicitly set, and it was a different default on dev site (true) to server build (false).

jasonlundien commented 2 years ago

@Phojie ---

Are you still having issues ? Did you check to make sure you had @fortawesome/vue-fontawesome ?

MrTob commented 2 years ago

Ok I found it - the "suffix" config option for @nuxtjs/fontawesome had to be explicitly set, and it was a different default on dev site (true) to server build (false).

same issue here on dev working fine, production build no icons, can you provide me detailed infos how you solved it? image these are my dependencies

phojie commented 2 years ago

Here's I solve the issue

Instead of importing the css file from node_modules @fortawesome folder, I just copy the css file located in node_modules /@fortawesome/fontawesome-svg-core/style.css to my assets/css folder and import it manually in nuxt.config.js

css: [
    '@/assets/css/fontawesome.css',
  ],