0

I'm using vue.js and gridsome to make a personal portfolio. how ever I have this problem that in the fist load of page, the icon sizes are too big and suddenly the come back to normal size. These is my webpage:farzinnasiri.com
I'm using cdn for these website so I don't know that can everybody see the issue but in my first load in both chrome and Firefox the arrow button below the View Portfolio was too big.Also these is that parts code:

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

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

also this is my 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)
}

I found some similar issues on the web but I since most of them used pure html/css and I'm using vue those didn't help me to find the answer. can any body help?

Farzin Nasiri
  • 710
  • 1
  • 10
  • 27

1 Answers1

1

you have written below style in vue component, can you move it in a css file:

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

The problem is app.js file has the above css, so it's taking time to load and once the file is loaded in DOM then you are seeing the effect.

Syed
  • 15,657
  • 13
  • 120
  • 154
  • sorry sir but I didn't get what to do to fix it. I just have to add this code to my css styles? – Farzin Nasiri Apr 04 '20 at 09:57
  • @FarzinNasiri, YES, somehow this `.svg-inline--fa.fa-w-10 { width: 0.625em }` is coming for JS file, if possible remove it from JS file and paste it to CSS file, if not possible to remove from JS file then no problem, just add this `.svg-inline--fa.fa-w-10 { width: 0.625em }` in your CSS file. Let me know if that was helpful. – Syed Apr 04 '20 at 10:06
  • hey, thanks for the hint. it worked but there is a problem.`www.farzinnasiri.com`. This is my site. I added the piece of css code in two vue components but the problem is that in didn't work in the component which just displays the social media icons. it works on the component which shows the down-arrow icon. – Farzin Nasiri Apr 11 '20 at 19:10