当现有项目需要新增字体图标时,可以参考下面的步骤:
步骤一:打开 iconfont-阿里巴巴矢量图标库 ,搜索选择需要的iconfont字体图标,添加到购物车并下载;
步骤二:下载完成后,打开文件夹中的iconfont.css后复制@font-face内容:
将复制的内容粘贴进项目的原iconfont.css文件中,并将字体图标的.icon-yunbaoleiji:before也粘贴进去(之前iconfont.css中的@font-face不要删);
步骤三:复制下载文件中的iconfont.ttf、iconfont.woff、iconfont.woff2这三个文件重命名后,复制到项目assets/icon文件夹中,类似下方图片:
(注:如果下载的是svg文件则需要在iconfont.js中添加新下载的iconfont.js中对应的<symbol></symbol>(不需要全部替换,粘贴新增svg即可),并将iconfont.SVG文件粘贴到icon文件夹中)
步骤四:正常使用iconfont即可。