Vue项目中使用fontawesome图标库的方法

npm i --save @fortawesome/fontawesome-svg-core

# Vue2.x
npm i --save @fortawesome/vue-fontawesome@latest-2
# Vue3.x
npm i --save @fortawesome/vue-fontawesome@latest-3

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import all icons, solid图标库的包名为fas、regular图标库的包名为far、brands图标库的包名为fab */
import { fas } from '@fortawesome/free-solid-svg-icons'
// import { far } from '@fortawesome/free-regular-svg-icons'
// import { fab } from '@fortawesome/free-brands-svg-icons'
/* add icons to the library */
library.add(fas)
/* add font awesome icon component */
Vue.component('font-awesome-icon', FontAwesomeIcon)

<template>
  <div class="brand-icon">
    <a><font-awesome-icon icon="fa-brands fa-qq"/></a>
    <a><font-awesome-icon icon="fa-brands fa-weixin"/></a>
    <a><font-awesome-icon icon="fa-brands fa-github"/></a>
  </div>
</template>
<script>
export default {
}
</script>
<style scoped>
.brand-icon {
  display: flex;
  justify-content: center;
}
.brand-icon a {
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.45rem;
  color: #ceb4b4;
  background-color: #257979;
  border-radius: 50%;
  border: 1px solid #333;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.3s;
}
</style>

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faWeixin, faQq, faGithub } from '@fortawesome/free-brands-svg-icons'
library.add(faWeixin, faQq, faGithub)
export default {
  name: 'components',
  components: {
    FontAwesomeIcon
  }
}

<div class="other-login">
  <a><font-awesome-icon icon="fa-brands fa-qq"/></a>
  <a><font-awesome-icon icon="fa-brands fa-weixin"/></a>
  <a><font-awesome-icon icon="fa-brands fa-github"/></a>
</div>

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/vue-fontawesome
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-regular-svg-icons

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'//同一个图标的其他系列
library.add(fas,far)
Vue.component('font-awesome-icon', FontAwesomeIcon)

<font-awesome-icon icon="heart" />
<font-awesome-icon icon="clock" />
<font-awesome-icon icon="clock" style="color: #476151;" />