vue 使用font-awesome 只需两步

Posted 2021-02-17 mmykdbc

1.npm 安装font-awesome 以及需要的所有依赖 

npm i --save @fortawesome/fontawesome-svg-core 
  npm i --save @fortawesome/free-solid-svg-icons 
  npm i --save @fortawesome/vue-fontawesome

2.在入口文件main.js里面引入相关的样式

import Vue from ‘vue‘
import App from ‘./App‘
import { library } from ‘@fortawesome/fontawesome-svg-core‘
import { faCoffee } from ‘@fortawesome/free-solid-svg-icons‘
import { FontAwesomeIcon } from ‘@fortawesome/vue-fontawesome‘

library.add(faCoffee)

Vue.component(‘font-awesome-icon‘, FontAwesomeIcon)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  components: { App },
  template: ‘<App/>‘
})

　　

　　

如此，就可以愉快的使用了。

  <div id="app">
    <font-awesome-icon icon="coffee" />
  </div>
</template>

<script>
export default {
  name: ‘App‘
}
</script>