目录

在 Vue.js 项目中使用 Font awesome pro 6

一、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" />

5. Watch out for self-closing tags in HTML

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