在vue项目中使用阿里图标库

1. 打开阿里图标库官网 阿里图标库官网
2. 随便里面很多类型的图标，找一个点击进去
   
3. 把鼠标放在想要的图标上面，点击购物车添加入库
   .
4. 选择后后点击自己的购物车，添加的都在这里了
   
5. 点击下载代码
   
6. 下载下来的是一个压缩包，解压
   
7. 把红框的两个文件添加到vue项目中，建议放在assets下面 因为字体图标也是静态文件
   
8. 修改iconfont.css的路径 注意 这里的路径是找寻iconfont.ttf的路径，因为我的在同一路径，根据自己的存放修改

@font-face {
    font-family: "iconfont";
    src: url('./iconfont.ttf');
    /* IE9 */
    src: url('./iconfont.ttf') format('embedded-opentype'), /* IE6-IE8 */
    url('./iconfont.ttf') format('woff2'), url('./iconfont.ttf') format('woff'), url('iconfont.ttf?t=1594014199667') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('./iconfont.ttf') format('svg');
    /* iOS 4.1- */
}

9. 这时候可能会报错，因为缺少css-loader依赖包，下载

npm install css-loader --save

如果还报错，就是路径的问题

10. 全局注册（在main.js）
    

11. 终于可以使用了
    打开压缩包里面的demo.html
    
    

12. 使用的时候必须添加类名
    

13. 使用效果
    

如果需要动态绑定使用， 可以看下我的其他文章