vue.js 首次加载静态页面时字体真棒图标大小跳跃

Question

我正在使用 vue.js 和 gridsome 制作个人作品集。我怎么会遇到这个问题，在第一次加载页面时，图标尺寸太大，然后突然恢复到正常尺寸。这是我的网页：farzinnasiri.com
我正在为这些网站使用 cdn，所以我不知道每个人都能看到这个问题，但在我第一次加载 chrome 和 Firefox 时，View Portfolio 下方的箭头按钮是也是 big.Also 这些是零件代码：

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

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

这也是我的 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，所以这些并没有帮助我找到答案。任何人都可以帮忙吗？

Answer 1

你在vue组件里写了下面的样式，能不能移到css文件里：

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

问题是 app.js 文件具有上述 css，因此加载需要时间，一旦文件在 DOM 中加载，您就会看到效果。

vue.js 首次加载静态页面时字体真棒图标大小跳跃

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

css

font-awesome

vue.js

gridsome