Vue项目中，引入阿里矢量图标库

Vue项目中，引入阿里矢量图标库

（1）阿里矢量图标库地址（需要登录）：

https://www.iconfont.cn

（2）找到自己心仪的图标：

（3）添加入库：

（4）点击购物车图标（免费的哦）：

（5）将所选的图标添加到项目中（没有项目的，可以新建项目）：

（6）下载到本地：

（7）将下载的文件重命名放入自己的Vue项目中：

（8）关联前缀样式：

@font-face {
  font-family: "iconfont"; /* Project id 2581973 */
  src: url('iconfont.woff2?t=1622448447142') format('woff2'),
       url('iconfont.woff?t=1622448447142') format('woff'),
       url('iconfont.ttf?t=1622448447142') format('truetype');
}
//注意第二个icon-前面有个空格
.iconfont,[class^="icon-"],[class*=" icon-"] {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-hua:before {
  content: "\e60d";
}

（9）在main.js当中引入使用（全局的）：

import './assets/icon/iconfont.css'

（10）代码中引入：

<i class="icon-hua" style="color: red;font-size: 24px;"></i>

---

总结

每天一个提升小技巧！！！