Element-ui中如何正确显示font-awesome的icon?

前言

  最近使用Element-ui，看到自带的icon实在少得可怜，所以打算用font-awesome，但是我发现了一个很神奇的事情，就是居然不显示font-awesome中的icon，于是乎，开始了后续步骤。

步骤

   1：检查font-awesome是否被引进？
   2：检查语法是否写错？
  很遗憾，检查下来都是正常的，没有任何异常，但是为何不显示？令我百思不得其解，于是乎，开始问度娘，谷歌了~一路下来，看到了大佬们改写font-awesome源码，于是乎总结出了一套用法，源码如下：

  [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 url("./assets/plug-ins/font-awesome-4.7.0/css/font-awesome.min.css");
    $fa-css-prefix: el-icon-fa;

上述为样式文件，下面为使用说明：

用法一：<el-button icon="el-icon-fa fa-user" size="mini">用户</el-button>用法二：<i class="fa fa-user"></i>

结果如图所示：

效果图

作者：骑着毛驴逗你玩儿
链接：https://www.jianshu.com/p/533f2e5083e1