logo

Fix FontAwesome icons being huge on page load

Posted on
Authors

Problem

If you are using FontAwesome in your project, you may face to this problem: FontAwesome icons being huge on page load

Solution

  1. Turn off autoAddCss
import { config } from '@fortawesome/fontawesome-svg-core'
config.autoAddCss = false

import { config } from '@fortawesome/fontawesome-svg-core'
config.autoAddCss = false
  1. Load in CSS directly in your SCSS file:
@import 'node_modules/@fortawesome/fontawesome-svg-core/styles'

@import 'node_modules/@fortawesome/fontawesome-svg-core/styles'

You can apply this solution if your project is using Javascript framework such as React, Vue, etc…

I hope this solution can help you! Thanks for reading!