.一、登录阿里云矢量图标库
登录阿里云矢量图标库官网,搜索自己想要的图标,点击添加入库
添加入库以后我们在购物车里面将图标添加至项目,加入新项目,项目名称自定义,然后确认。
找到刚才的项目,下载至本地,解压备用

二、在项目中使用
新建如下文件夹
把刚才解压以后的iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2复制到iconfont文件夹下


index.html文件下面引入样式

新建inconList.js文件

讲下载的图标名称,写到list里面,利用list然后就可以批量展示了,
也可以单独按需引入<i class="icon-xxxxx"></i>

网友评论