时间戳

首页 > 解决方案 > 字体真棒图标大小在使用 vue.js 首次加载静态页面时跳跃

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

问题描述

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

  <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这些并没有帮助我找到答案。任何身体都可以帮忙吗？

标签： cssvue.jsfont-awesomegridsome

解决方案

您在 vue 组件中编写了以下样式，您可以将其移动到 css 文件中：

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

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

推荐阅读