Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icons load incorrectly (very large) in server side when using library.add (Nuxt.js) #14

Closed
yliaho opened this issue Nov 5, 2017 · 9 comments

Comments

@yliaho
Copy link

@yliaho yliaho commented Nov 5, 2017

Icons render initially very large until finally settling down to wanted size. I'm using nuxt with server side rendering.

Fontawesome gets loaded as a plugin with nuxt.js:

import fontawesome from '@fortawesome/fontawesome'
import iconCSS from './icon-css.css'
import {
  faFrown
} from '@fortawesome/fontawesome-free-solid'

fontawesome.dom.styles(iconCSS)

fontawesome.library.add(
  faFrown
)

export default fontawesome

Am I missing something here? Is there a workaround for this behavior?

@robmadole

This comment has been minimized.

Copy link
Contributor

@robmadole robmadole commented Nov 6, 2017

@yliaho the issue here is probably two-fold.

First the call to fontawesome.dom.styles() returns a string that represents the CSS that is necessary to properly display icons. It looks like you are trying to pass it something which will not work as expected.

Second, the reason that the icon appears large to begin with is that it's being displayed before the CSS is parsed and re-paints. If you are doing server-side rendering and you rely on the CSS to size the icon you'll need to make sure that the CSS for Font Awesome is available first. You could do this by in-lining the CSS into the page or by writing/adding to the Nuxt plugin so that it's inserted.

Under the hood the JS library is trying to add the CSS for you and this is what causes the flash (I'm guessing). Try setting this config option as part of your plugin to remove this option and see if that leaves the icon large:

fontawesome.config = {
  autoAddCss: false
}

That disables the automatic inserting of a <style> tag into the <head> of your doc.

@yliaho

This comment has been minimized.

Copy link
Author

@yliaho yliaho commented Nov 16, 2017

@robmadole sorry for the late reply - yeah, that did the trick! Thank you!

@chewtoys

This comment has been minimized.

Copy link

@chewtoys chewtoys commented Dec 7, 2017

@yliaho could you share the plugin? with nuxt config

@robmadole robmadole closed this Dec 8, 2017
@OriginalEXE

This comment has been minimized.

Copy link
Contributor

@OriginalEXE OriginalEXE commented Dec 13, 2017

@chewtoys Here is my example (using the pro version):

font-awesome.js (place in the plugins folder):

import fontawesome from '@fortawesome/fontawesome';
import { faCoffee, faCode } from '@fortawesome/fontawesome-pro-regular';

fontawesome.config = {
  autoAddCss: false,
};

fontawesome.library.add(faCoffee, faCode);

nuxt.config.js (relevant part)

css: [
  '@fortawesome/fontawesome/styles.css',
],
plugins: [
  '~/plugins/font-awesome',
],

index.vue

<template>
  <div>
    <p>Hello! <font-awesome-icon :icon="['far', 'code']"></font-awesome-icon><p>
  </div>
</template>

<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';

export default {
  components: {
    FontAwesomeIcon,
  },
};
</script>
@codeofsumit

This comment has been minimized.

Copy link

@codeofsumit codeofsumit commented Jan 5, 2018

@fortawesome/fontawesome-pro-regular where in the documentation are you finding this? I have no idea what packages to install to get started with pro 🤔

@robmadole

This comment has been minimized.

Copy link
Contributor

@robmadole robmadole commented Jan 5, 2018

@codeofsumit

This comment has been minimized.

Copy link

@codeofsumit codeofsumit commented Jan 7, 2018

@robmadole thanks

joshukraine added a commit to euroteamoutreach/bibliya.net.ua that referenced this issue Jul 9, 2018
joshukraine added a commit to euroteamoutreach/bibliya.net.ua that referenced this issue Jul 9, 2018
joshukraine added a commit to euroteamoutreach/bibliya.net.ua that referenced this issue Jul 9, 2018
Alrefai added a commit to Alrefai/next-calorie that referenced this issue Sep 25, 2018
@moltar

This comment has been minimized.

Copy link

@moltar moltar commented Oct 3, 2018

Btw, the new way (renamed packages) would look like this:

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { faFacebookF, faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'
import { faStar, faAngleRight, faSearchPlus } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

config.autoAddCss = true

library.add(faFacebookF, faTwitter, faGithub, faStar, faAngleRight, faSearchPlus)

Vue.component('fa-icon', FontAwesomeIcon)
@samuelterra22

This comment has been minimized.

Copy link

@samuelterra22 samuelterra22 commented Nov 13, 2018

I had the same problem using Nuxtjs but I fixed just reading the readme

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.