Font Awesome 是一个基于CSS 的字体图标库(图标工具包)。

- 方法一，在vue +Element 的项目中直接安装、使用Font-Awesome图标字体库：

• 1. 安装font-awesome：

yarn add font-awesome

• 2. 在main.js中引入：

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

3. 在组件中使用
参考官网的使用方法：https://fontawesome.dashgame.com/#top

<template>
	<div>
		微信：<span class="fa fa-wechat "></span> 
	</div>
</template>

如图：

也可以直接引入，在组件中使用的方法不变。
上述两步（安装和引入），换成一步：在vue项目点的public文件夹下的index.html中引入font-awesome的地址，便可直接在组件中使用，使用方法和上面一致，参考官网。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

- 方法二，将Font-Awesome字体图标整合到Element中：

**Element-ui中使用font-awesome的icon：

1. 安装，font-awesome （也可在index.html中直接引入font-awesome，参考官网http://fontawesome.dashgame.com/）

yarn add font-awesome

2. 在assets的直接目录下,新建style.less
style.less:

[class^='el-icon-fa'],[class*=' el-icon-fa']{
    display: inline-block;
    font:normal normal normal 20px/1 FontAwesome !important;
    font-size: inherit;
    text-rendering: auto;
    webkit-font-smoothing:antialiased;
    -moz-osx-font-smoonthing:grayscale;

};
@import url("../../node_modules/font-awesome/less/font-awesome");
@fa-css-prefix:el-icon-fa;

注意：
这里项目可能会提醒你安装less-loader,如图示报错:

安装less-loader 和 less:

yarn add less-loader less

安装完成后重启项目即可。

3. 在main.js中引入style.less和font-awesome的样式：

//引入font-awesome，将Awesome字体整合到Element中
import "font-awesome/css/font-awesome.css";
import "./assets/style.less";

4.在页面中使用：
camera-retro 是Font Awesome里的一个相机的图标名称，如图：

在页面中使用：

//***此时可用，el-icon-fa-图标名  使用font-awesome中的图标；也支持font-awesome原来的使用方法，注意，这里字体在style.less做了限制；  
<template>
  <div class="home">
相机：<i class="el-icon-fa-camera-retro" style="margin-right:20px;"> </i>
用户：<i class="el-icon-fa-user" style="margin-right:20px;"></i>
微信：<span class="fa fa-wechat "></span>
  </div>
</template>