Fix FontAwesome icons being huge on page load

Fri, 30 Apr 2021 09:44:15 GMT

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

2. 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!