SoFunction
Updated on 2025-04-05

vue-cli3 introduces font-awesome operations

Add in

"font-awesome": "^4.7.0"

Execute npm install

Introduced in

// font

import "font-awesome/css/"

Supplementary knowledge:Introduce font-awesome in Vue 2.0 and correctly display icon of font-awesome in Element-ui

As shown below:

npm install font-awesome --save

Introduced in

import 'font-awesome/css/'

Here I am

[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/';
 $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">user</el-button>
    <el-button icon="el-icon-fa fa-tree" size="mini">user</el-button>

The above article on the introduction of font-awesome in vue-cli3 is all the content I share with you. I hope you can give you a reference and I hope you can support me more.