vue+elementui+阿里icon unicode 踩坑

步骤

1. 在阿里icon中 下载至本地
2. 在vue src中新建 fonts文件夹并将 eot，ttf，woff文件放入该文件中。

3. 在fonts文件夹下新建 iconfons.css 文件 写入样式

   @font-face {
   font-family: "iconfont";  /* project id 600054 */
   src: url(./iconfont.eot);
   src: url(./iconfont.eot?#iefix) format('embedded-opentype'),
   url(./iconfont.woff) format('woff'),
   url(./iconfont.ttf) format('truetype');  
   }
   .iconfont {
   font-family:iconfont !important;
   font-size:16px;
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -webkit-text-stroke-width: 0.2px;
   -moz-osx-font-smoothing: grayscale;
   }

   url中去掉 ‘符号

4. 在入口文件（main.js）中引入

   import './assets/fonts/iconfont.css'

5. 单文件中引用(切记一定要放在 v-html中)
   
<div class="iconfont" v-html="&#xe98d;"></div>


感想

菜鸟就是菜鸟，自己被自己坑，以前我直接写在标签内<div class="iconfont">&#xe98d;<div> 真是死活加载不出来，一直以为是webpack没有打包进来。各种搜如何配置loader。到最后却是因为放在了标签内。

广告 ：想学架构的同学看下 直通车