Method steps for configuring font-awesome5 in vue-JS Tutorial-php.cn

Method steps for configuring font-awesome5 in vue

不言

Release： 2019-01-26 09:30:17

forward

7631 people have browsed it

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

Copy after login

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

Copy after login

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

Copy after login

Method steps for configuring font-awesome5 in vue

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)

Copy after login

## in main.js Method steps for configuring font-awesome5 in vue

#4. Use

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

Copy after login

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']",

Method steps for configuring font-awesome5 in vue

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

Copy after login

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)

Copy after login

in .js 3. You can write

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

Copy after login

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

Copy after login

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

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

Copy after login

Method steps for configuring font-awesome5 in vue

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!