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