uniapp/微信小程序base64方式引入iconfont

一、准备网站

　　1、https://www.iconfont.cn

　　2、https://transfonter.org

 

二、在iconfont里选择自己想要的图标，将他们添加到项目里。跳转到项目页面后，按下图操作，并下载至本地

　　

 

 

三、解压下载出来的zip

　　

 

 

四、打开https://transfonter.org

　　1、add fonts 选择刚才解压出来的文件夹中的iconfont.tff文件，并按下图配置，然后点击convert

　　

 

　　

 

 

 五、下载转换后的文件并解压

　　

 

　　

 

 

六、项目内新建xxx.css文件，这里新建一个iconfont_test.css

　　

 

 

七、将转换后得到的css文件复制到iconfont_test.css中

　　

 

 　　

 

 

八、将原始的css文件内，除了@font-face{}中的内容一同复制到iconfont_test.css中

　　

 

 　　

 

 

九、现在你可以按如下方式使用图标

　　1、引入图标@import '@/iconfont_test.css';

　　2、<text class="iconfont xxxxxx"></text>   // xxxxx 换成你添加的图标名称