Css 字体大小在vue.js静态页面的第一次加载中跳跃

我正在使用

vue.js

和

gridsome

制作个人投资组合。我曾经有过这样的问题，在第一次加载页面时，图标尺寸太大，突然又恢复到正常大小。这是我的网页：
我正在为这些网站使用cdn，所以我不知道每个人都能看到这个问题，但在我第一次加载chrome和Firefox时，

视图组合下的箭头按钮太大了。另外，这些部分代码：

  <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>

这也是我的
main.js
文件：

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)
}

我在网上发现了一些类似的问题，但我发现它们中的大多数都使用纯html/css，而我使用的是
vue
这些都没有帮助我找到答案。有人能帮忙吗
 您已经在vue组件中编写了以下样式，是否可以将其移动到css文件中：

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

问题是app.js文件具有上述css，因此加载需要时间，一旦文件加载到DOM中，您就会看到效果。
对不起，先生，我不知道如何修复它。我只需要将此代码添加到我的css样式中？@FarzinNasiri，是的，不知何故，这
.svg-inline--fa.fa-w-10{width:0.625em}
是为JS文件而来的，如果可能，将其从JS文件中删除并粘贴到css文件中，如果无法从JS文件中删除，则没有问题，只需添加此
.svg-inline--fa.fa-w-10{width:0.625em}
在CSS文件中。让我知道这是否有用。嘿，谢谢你的提示。它起作用了，但有一个问题。
www.farzinnasiri.com
。这是我的网站。我在两个vue组件中添加了一段css代码，但问题是，在只显示社交媒体图标的组件中，in不起作用。它在显示向下箭头图标的组件上工作。
.svg-inline--fa.fa-w-10 {
    width: 0.625em;
}