Iconfont导出的SVG增加图标

在项目中使用Iconfont导出的图标，由于Iconfont项目不是自己的无法修改类似下面这样

@font-face {
  font-family: "iconfont"; /* Project id 2282770 */
  src: url('https://at.alicdn.com/t/c/font_2282770_zktlpbmpa1e.woff2?t=1711895565403') format('woff2'),
       url('https://at.alicdn.com/t/c/font_2282770_zktlpbmpa1e.woff?t=1711895565403') format('woff'),
       url('https://at.alicdn.com/t/c/font_2282770_zktlpbmpa1e.ttf?t=1711895565403') format('truetype'),
       url('https://at.alicdn.com/t/c/font_2282770_zktlpbmpa1e.svg?t=1711895565403#iconfont') format('svg');
}

那么如何来修改这些图标呢？我将修改图标的方法分享给大家。

第一步

通过CSS中的路径下载SVG文件 （at.alicdn.com/t/c/font_22… 导入SVG，效果如下：

第二步

从Iconfont下载新增图标的SVG文件，并将SVG转换为glyph格式，这里分享一个SVG转glyph格式的网址glyphter.com/。 打开原项目中使用的SVG文件，并将转换后的glyph格式追加到文件中，如下：

第三步：

将修改后的SVG文件通过icomoon.io/app/#/selec… 导入并生成新的图标库，在图标右侧选择Select All并在页面底部点击Generate Font下载即可，下载的时候可以设置首选项，根据你的需求选择。

下载后的文件即可导入到项目中使用

解决微信小程序中使用iconfont图标真机不显示问题

将下载的图标的ttf格式的字体文件通过transfonter.org/ 这个网站转换为BASE64格式，注意会很长，将base64格式的内容复制到字体图标的css文件中即可使用,

最终的文件内容