font awesome icons size jumps in first load of a static page with vue.js

Question

I'm using vue.js and gridsome to make a personal portfolio. how ever I have this problem that in the fist load of page, the icon sizes are too big and suddenly the come back to normal size. These is my webpage:farzinnasiri.com
I'm using cdn for these website so I don't know that can everybody see the issue but in my first load in both chrome and Firefox the arrow button below the View Portfolio was too big.Also these is that parts code:

  <section id="view-portfolio">
    <a class="portfolio-button button" href="#works" align="middle">
      <span> View Portfolio </span>
      <font-awesome-icon :icon="['fas', 'angle-down']"/>
    </a>
  </section>

The css:

 .portfolio-button {
  position: absolute !important;
  color: white;
  left: 50%;
  text-align: center;
  bottom: 10px;
  transform: translateX(-50%);
  margin: 7px 0px 0px;
  padding: 14px 14px 7px;
}
.portfolio-button span {
  display: block;
}

.button {
  text-transform: uppercase;
  font-weight: 300;
}
.portfolio-button:hover{
  text-decoration: none;
}

also this is my main.js file:

import DefaultLayout from '~/layouts/Default.vue'
import '~/vendor/bootstrap.min.css'

import { library,dom } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fas)
library.add(fab)
dom.watch()
export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component('font-awesome-icon', FontAwesomeIcon)
  Vue.component('Layout', DefaultLayout)
}

I found some similar issues on the web but I since most of them used pure html/css and I'm using vue those didn't help me to find the answer. can any body help?

Answer 1

you have written below style in vue component, can you move it in a css file:

.svg-inline--fa.fa-w-10 {
    width: 0.625em;
}

The problem is app.js file has the above css, so it's taking time to load and once the file is loaded in DOM then you are seeing the effect.