【element-ui其他icon笑脸评分使用方法，官方文档踩坑】

前提： 使用elemen的<el-rate>评分组件，因项目使用默认的星星样式不太适合当前需求，遂用到了笑脸评分的这个自定义icon

---

• 问题：直接按照官方文档以下代码使用运行发现并不生效：

<el-rate
  v-model="value"
  :icon-classes="iconClasses"
  void-icon-class="icon-rate-face-off"
  :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate>

<script>
  export default {
    data() {
      return {
        value: null,
        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
      }
    }
  }
</script>

• 起初以为是样式冲突造成的不显示，打开控制台查看也没有报什么错误，搞了半天发现问题所在
  这个图标需要通过iconfont 的方式来做，并不是直接运行官方示例代码就行的，需要到源码地址下载并引入iconfont才可以生效。

---

下载地址https://github.com/ElemeFE/element，

---

把源码下载并解压按照路径element-dev\element-dev\examples\assets\styles\fonts找到所需文件

• 复制到自己项目创建的文件位置
  
• 引入样式
  import "@/assets/elementStyle/fonts/style.css"

---

再查看页面效果，笑脸就出现了