Method steps for configuring font-awesome5 in vue

The content of this article is about the steps of configuring font-awesome5 in Vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Let’s not talk about the configuration of vue for now, mainly the configuration of font-awesome5 later:

1. Install fontawesome basic configuration

npm i --save @fortawesome/fontawesome
npm i --save @fortawesome/vue-fontawesome

2. Install fontawesome Style dependency

npm i --save @forawesome/fontawesome-free-solid
npm i --save @forawesome/fontawesome-free-regular
npm i --save @fortawesome/fontawesome-free-brands

or two steps in one

npm i --save @fortawesome/fontawesome @fortawesome/vue-fontawesome @forawesome/fontawesome-free-solid @forawesome/fontawesome-free-regular @fortawesome/fontawesome-free-brands

3. Configure font-awesome

import fontawesome from '@fortawesome/fontawesome'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import solid from '@fortawesome/fontawesome-free-solid'
import regular from '@fortawesome/fontawesome-free-regular'
import brands from '@fortawesome/fontawesome-free-brands'
fontawesome.library.add(solid)
fontawesome.library.add(regular)
fontawesome.library.add(brands)
Vue.component('font-awesome-icon', FontAwesomeIcon)

## in main.js

#4. Use

<font-awesome-icon></font-awesome-icon>

on the vue page. Of course, it does not have to be written as the font-awesome-icon tag. It is just a comparison between the component and the Vue.component in main.js. Main.js Vue.component just makes it a global component. In:icon="['Style','Chart name without style prefix']",

The above are using font-awesome 5.0.13

For version 5.6.3, because Font Awesome SVG Core has been added, the installation of 5.6.3:

1. Install fontawesome basic configuration

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

2. In main Configure font-awesome

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas)
Vue.component('font-awesome-icon', FontAwesomeIcon)

in .js 3. You can write

<font-awesome-icon></font-awesome-icon>

or

<font-awesome-icon></font-awesome-icon>

in the page. For non-fas, you can directly write

<font-awesome-icon></font-awesome-icon>

The remaining two items, fal and fab, are still in the 5.6.3 version. I don’t know how to install them without pro. Please add some advice

The above is the detailed content of Method steps for configuring font-awesome5 in vue. For more information, please follow other related articles on the PHP Chinese website!