Chương 5-Bài 3. Cài đặt thư viện icon Font Awesome

Chúng ta sẽ sử dụng thư viện Font Awesome: https://github.com/FortAwesome/vue-fontawesome Cài đặt Font Awesome

• Thực thi câu lệnh sau:

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

• Hiệu chỉnh code trong file project-netashop/src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

// Import thư viện Bootstrap (JS và CSS)
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

// Import thư viện Font Awesome
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fab, fas, far)
Vue.component('font-awesome-icon', FontAwesomeIcon)

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

 

Cách sử dụng

Sau khi cài đặt và import thư viện, chúng ta có thể sử dụng Font Awesome trong Vue Template như sau:

• Solid icons: @fortawesome/free-solid-svg-icons

<font-awesome-icon :icon="['fas', 'image']" />
<font-awesome-icon :icon="['fas', 'user']" />

• Regular icons: @fortawesome/free-regular-svg-icons

<font-awesome-icon :icon="['far', 'image']" />
<font-awesome-icon :icon="['far', 'user']" />

• Branch icons:@fortawesome/free-brands-svg-icons

<font-awesome-icon :icon="['fab', 'twitter']" />