将 Font Awesome 集成到饿了么UI中

饿了么UI(Element)的图标 太少了，少到连登录页面所需的用户和密码的图标都没有。如果能将 Font Awesome 集成到 Element 就好了。

Font Awesome 提供了 LESS，所以可以很容易的集成到 Element 中。

集成

首先，下载 Font Awesome：

npm install font-awesome --save

然后，下载 less

npm install less --save

接着，下载 less-loader

npm install less-loader --save

最后，在 App.vue 的 <style> 里加上：

<style lang="less">
  [class^="el-icon-fa"], [class*=" el-icon-fa"] {
    font-family:"FontAwesome" !important;
    display: inline-block;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  @import url("../node_modules/font-awesome/less/font-awesome");
  @fa-css-prefix: el-icon-fa;
  @import url("../node_modules/element-ui/lib/theme-chalk/index.css");
  </style>

使用

在 <el-input> 使用

<el-input prefix-icon="el-icon-fa-user" placeholder="用户名" v-model="loginForm.username"></el-input>

单独使用

<i class="el-icon-fa-user"></i>

参考：element/issues/1054

vue Element 饿了么UI 2018-05-05 16:58 2329391