一、use a package manager
https://fontawesome.com/v6.0/docs/web/setup/packages
1. Config Access
Keep It Secret, Keep It Safe!
Your super-secret npm token - HIDDENTOKEN - is private. Don’t share it with anyone who shouldn’t have it. (You can find it in your account.)
Set up npm token for All projects
1
2
|
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" HIDDENTOKEN
|
2. install Your package
The pro Package
1
2
3
|
npm install --save @fortawesome/fontawesome-pro@next
yarn add @fortawesome/fontawesome-pro@next
|
The free Package
1
2
3
|
npm install --save @fortawesome/fontawesome-free@next
yarn add @fortawesome/fontawesome-free@next
|
3. Pick Yur Method and add icons
https://fontawesome.com/v6.0/docs/web/setup/host-yourself/svg-js#reference-font-awesome-in-your-project
二、Set up with Vue.js
https://fontawesome.com/v6.0/docs/web/use-with/vue/
1. Add SVG core
1
2
3
4
5
6
|
# install the beta package - using the @next flag
npm i --save @fortawesome/fontawesome-svg-core@next
# install the beta package - using the @next flag
yarn add @fortawesome/fontawesome-svg-core@next
|
2. Add icon packages
Free
1
2
3
4
5
6
7
|
# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons@next
npm i --save @fortawesome/free-regular-svg-icons@next
# Free icons styles
yarn add @fortawesome/free-solid-svg-icons@next
yarn add @fortawesome/free-regular-svg-icons@next
|
Pro
1
2
3
4
5
6
7
8
9
10
11
12
13
|
# Pro icons styles
npm i --save @fortawesome/pro-solid-svg-icons@next
npm i --save @fortawesome/pro-regular-svg-icons@next
npm i --save @fortawesome/pro-light-svg-icons@next
npm i --save @fortawesome/pro-thin-svg-icons@next
npm i --save @fortawesome/pro-duotone-svg-icons@next
# Pro icons styles
yarn add @fortawesome/pro-solid-svg-icons@next
yarn add @fortawesome/pro-regular-svg-icons@next
yarn add @fortawesome/pro-light-svg-icons@next
yarn add @fortawesome/pro-thin-svg-icons@next
yarn add @fortawesome/pro-duotone-svg-icons@next
|
3. Add the Vue Component
1
2
3
|
npm i --save @fortawesome/vue-fontawesome@latest
yarn add @fortawesome/vue-fontawesome@latest
|
三、 Add icons with Vue.js
1. Set up the library
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
import Vue from 'vue'
import App from './App'
/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* add icons to the library */
library.add(faUserSecret)
/* add font awesome icon component */
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
|
2. Call the icons
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<template>
<div id="app">
<!-- Add the style and icon you want -->
<font-awesome-icon icon="fa-solid fa-user-secret" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
|
3. Several icon in different styles
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/* add fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
/* add some free styles */
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
/* add some pro styles */
import { faBicycle } from '@fortawesome/pro-regular-svg-icons'
import { faCoffee } from '@fortawesome/pro-light-svg-icons'
import { faFeather } from '@fortawesome/pro-thin-svg-icons'
import { faHorseSaddle } from '@fortawesome/pro-duotone-svg-icons'
library.add(faTwitter, faUserSceret, faBicycle, faCoffee, faFeather, faHorseSaddle)
|
1
2
3
4
5
6
|
<font-awesome-icon icon="fa-brands fa-twitter" />
<font-awesome-icon icon="fa-solid fa-user-secret" />
<font-awesome-icon icon="fa-regular fa-bicycle" />
<font-awesome-icon icon="fa-light fa-coffee" />
<font-awesome-icon icon="fa-thin fa-feather" />
<font-awesome-icon icon="fa-duotone fa-horse-saddle" />
|
4. Same icon, different styles
1
2
3
4
5
6
7
|
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee as fasCoffee } from '@fortawesome/pro-solid-svg-icons'
import { faCoffee as farCoffee } from '@fortawesome/pro-regular-svg-icons'
import { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons'
import { faCoffee as fadCoffee } from '@fortawesome/pro-duotone-svg-icons'
library.add(fasCoffee, farCoffee, falCoffee, fadCoffee)
|
1
2
3
4
|
<font-awesome-icon icon="fa-solid fa-coffee" />
<font-awesome-icon icon="fa-regular fa-coffee" />
<font-awesome-icon icon="fa-light fa-coffee" />
<font-awesome-icon icon="fa-duotone fa-coffee" />
|
1
|
<font-awesome-icon icon="fa-regular fa-coffee"></font-awesome-icon>
|
And more https://fontawesome.com/v6.0/docs/web/use-with/vue/style