Element: [Feature Request] How to add third party icons like font-awesome 5

[WangHansen]

Existing Component

Yes

Component Name

icon

Description

There was description on how to add third party icon in FAQ, but it was removed.
The code below doesn't work with font-awesome 5:

@font-face {
  font-family: Font Awesome 5;
  font-style: normal;
  font-weight: 400;
  src: url(../../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-regular-400.eot);
}

i[class^="el-icon-fa"], i[class*=" el-icon-fa"] {
  font-family:"Font Awesome 5" !important;
  display: inline-block;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: baseline !important;
}

$fa-font-path: "../../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/";
$fa-css-prefix: "el-icon-fa";

@import "../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome.scss";

[Leopoldthecoder]

The description is removed because Element 2.0 doesn't require any additional setup when using third party icons. You can import and use the icons normally.

[WangHansen]

Thanks, find a way.
For those who want to use font-awsome 5 icons, include the following lines in your scss file:

$fa-font-path: "../../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts";

@import "../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome.scss";
@import "../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-regular.scss";
@import "../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-brands.scss";

use the icon this way:

<el-input type="email"
prefix-icon="fa fa-envelope"
placeholder="Email"
v-model="email"></el-input>

The fa5 official guide asked you to add class name far or fas
But it doesn't work, just use class fa will do

[ffxsam]

far and fas prefixes are for FontAwesome Pro.

[pixelpaulaus]

remember to install it first....

`npm i --save @fortawesome/fontawesome

npm i --save @fortawesome/fontawesome-free-webfonts`

[fmgono]

Thank you all for all the references..
now finally i'm success add font awesome 5 in element ui,
This is step by step...

1. npm i @fortawesome/[email protected]
2. Add this script to src/styles/index.scss

$fa-font-path: "../../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/fa-regular.scss";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/fa-solid.scss";

1. Now you can use it in your attribut component like

<el-input v-model="form.email" prefix-icon="fas fa-envelope" clearable />