Operation of vue cli3 Introducing font awesome

Add in package. json

"font-awesome": "^4.7.0"

Execute npm install

Introduced in main. js

// font

import "font-awesome/css/font-awesome.min.css"

Additional knowledge: Introduce font-awesome in Vue2.0 and correctly display icon of font-awesome in Element-ui

As shown below:

npm install font-awesome --save

Introduced in main. js

import 'font-awesome/css/font-awesome.css'

In App. vue

[class^="el-icon-fa"], [class*=" el-icon-fa"] {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome!important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 @import '../node_modules/font-awesome/css/font-awesome.css';
 $fa-css-prefix: el-icon-fa;

Normal use

 <i class="fa fa-user"></i>
    <i class="fa fa-tree"></i>
    <el-button icon="el-icon-fa fa-user" size="mini"> Users </el-button>
    <el-button icon="el-icon-fa fa-tree" size="mini"> Users </el-button>