1 :登录阿里巴巴矢量图库: http://www.icon font.cn/home/index
2 :创建自己的项目:
按照模板填写:
Symbol前缀和Font Family必须这样写。 在vue中像el-icon-xxx一样进行部署,避免命名不一致。
项目创建完成:
返回矢量图主页,找到所需的图标,然后加入项目。
1 :进入图表库
2 )找到自己想要的图标
3 )用自己想要的图标点击购物车图标加入购物车
点击4:右上角的购物车
5 )这里有自己选择参加的图标。 单击“添加到项目”按钮
6 :选择刚创建的项目
选择字体类别
8:本地下载
9 )下载后解压
10 )删除用红色标记的4个文件
11 )在vue项目的src ssets下新建icon文件夹,包含剩下的6个文件
12 :在main.js中引入iconfont.css文件
13 )在页面中导入图标,在仓库中,如果图标的名称为el-icon-denglu,则在页面中导入该名称即可。
界面效果: