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

前言

  最近使用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>

结果如图所示：

效果图

说明

原创作品，禁止转载和伪原创，违者必究！