前端必会 svg转iconFonts字体图标库详细教程！

字体图标制作教程

1. 第一步：打开阿里巴巴矢量图标库

参考域名：https://www.iconfont.cn/home/index

 

1. 第二步：上传需要制作成字体图标的svg文件至网站

 

 

选中svg文件打开

上传结束并保存

 

 

 

 

 

 

1. 第三步：新建项目（用于转化svg==>iconFont）

注意类名前缀 比如预案项目 前缀就填plan    FontFamily填相关字体planFontFamily

 

1. 第四步：把svg图标加入购物车 并添加至项目 最后下载解压完成。

 

 

第五步：html中使用方式如下：