Размер шрифта потрясающих значков скачет при первой загрузке страницы c с vue. js - PullRequest
Новая
       57

Размер шрифта потрясающих значков скачет при первой загрузке страницы c с vue. js

0 голосов
/ 02 апреля 2020

Я использую 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 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)
}

Я обнаружил в сети несколько похожих проблем, но я использовал большинство html / css, и я использую vue, которые не помогли мне найти ответ , может ли тело помочь?

1 Ответ

1 голос
/ 02 апреля 2020

Вы написали ниже стиль в компоненте vue, можете ли вы переместить его в файл css: 

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

Проблема в приложении. js Файл имеет выше css, поэтому требуется время для загрузки, и как только файл загружен в DOM, вы увидите эффект.

...