带有FontAwesome版本5的Vue.js

Question

I am trying to test the FontAwesome version 5 (Free) icons display ..

I have added the 3 packeges

"@fortawesome/fontawesome": "^1.1.2",
"@fortawesome/fontawesome-free-brands": "^5.0.4",
"@fortawesome/fontawesome-free-regular": "^5.0.4",
"@fortawesome/fontawesome-free-solid": "^5.0.4"

And I my HellowWorld.vue , I have added the following test :

<template>
    ...
    <div>
      <i class="fas faUser"></i>
      <i class="fas faCircle"></i>
      <i class="fas faFacebook"></i>
    </div>
</template>

<script>
    import fontawesome from '@fortawesome/fontawesome'
    import faUser from '@fortawesome/fontawesome-free-solid/faUser'
    import faCircle from '@fortawesome/fontawesome-free-regular/faCircle'
    import faFacebook from '@fortawesome/fontawesome-free-brands/faFacebook'
    fontawesome.library.add(faUser)
    fontawesome.library.add(faCircle)
    fontawesome.library.add(faFacebook)
    ...
</script>

But they don't display... I get the blinking question mark..

What could be wrong ? thanks for feedback

Answer 1

solved ! wrong class naming ( prefix changed ...)

with version 5 should be

    <div>
      <i class="fas fa-user"></i>
      <i class="far fa-circle"></i>
      <i class="fab fa-facebook"></i>
    </div>