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

WEB前端 33 2018-10-12 17:14

前言

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

结果如图所示:


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

说明

原创作品,禁止转载和伪原创,违者必究!

文章评论

2 关注 / 24 粉丝

我无话可说

广告已过期