微信小程序使用base64字体图标（生成字体图标+将字体图标转为base64格式）

问题：

1.微信小程序不能随意使用网络资源，如字体,css文件等

2.不能在小程序中使用字体文件

3.不能使用background-position背景图片定位来使用内部png图片

下面就介绍一下如何制作base64字体图标。

简易方式：

通过两个在线工具，很容易地生成base64加密的字体图标。

第一步：在线选择图标，生成字体及CSS文件

浏览器打开：https://icomoon.io/app/#/select
选择图标。觉得不够的话，在页面左下角点击"Add Icon From Library..."，添加字体库，可以选择免费的，常用的如FontAwsome字体。

choice.jpg

选择好图标后，点击页面右下角“Generate Font” ->Download，下载字体文件包icomoon.zip

generate.jpg

第二步：在线转换base64编码字体

解压icomoon.zip
浏览器打开：https://transfonter.org/

transfonter.jpg
点击“Add Fonts"按钮，上传解压文件夹中的字体文件：fonts/icomoon.ttf
在下面选项中，将Family support，Base64 encode两项设置为On，Formats一栏可只勾选woff2(生成文件的字节数少)
点击”Convert“按钮后，会在下面出现一个download链接，点击下载（transfonter.org-20180805-033630.zip）

第三步：合成小程序使用的 .wxss文件

在小程序工程中新建图标字体样式文件，如common/icons.wxss
打开第二步下载的文件包中的stylesheet.css，将@font-face内容拷贝到小程序的icons.wxss中
打开第一步下载的文件包中的style.css，将[class^="icon-"] 及以下的内容拷贝到icons.wxss中

第四步：使用字体图标

在wxml文件中使用view标签或image标签，添加class为wxss文件中的类名即可，若需要改变图标字体大小可以通过font-size来改变：

后记：

有些字体图标显示不出来，是因为小程序内核（X5/NWjs/JavaScriptCore)对woff2识别不出来的原因。若出现这种情况，就在转换时的输出选项上再勾选woff，或只选woff试试。

DIY图标字体

主要是采用字体制作工具，如Fontforge等制作矢量字体文件，然后可以借助icomoon.io网站导入，后面的步骤就与前面描述的一样了。

微信小程序使用base64字体图标（生成字体图标+将字体图标转为base64格式）相关推荐

微信小程序做问卷——前端部分(生成问卷)
文章目录实现效果界面功能数据功能各个组件的实现右上角的蓝色加号问卷结构部分以单选部分举例每个题型的灰色加号每个题型的删除按钮每个选项的删除按钮每个输入的数据记录全部代码 que ...
微信小程序webview页面使用painter生成海报
微信小程序webview页面使用painter生成海报因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...
微信小程序：爱情保证书制作生成
这是一款开启保证数生成制作的一款小程序支持一键生成情侣爱情保证图只需输入你和另一半姓名,再加上时间即可一键生成然后长按就可以保存了安装方法: 使用微信开发者工具打开源码然后提交上传审核就可 ...
微信小程序：流量主制作生成装逼工具
这是一款流量主制作生成小工具支持小程序流量主图制作生成也支持公众号的流量主制作生成每一种制作都包含了所有的流量主模式用户自己填写选择制作就可以了! 小程序源码下载地址: 微信小程序:流量主制作 ...
踩坑微信小程序开发mpvue使用iconfont，顺便解决偶现图标显示不正确
刚刚接触iconfont, 发现它真是个好东西. 使用字体图标的好处: 改颜色,改大小都可以随时所欲,写个多态按钮分分钟搞定,爽的不要太过分! 阿里的字体图库 https://www.iconfon ...
微信小程序开发笔记进阶篇④——基于iconfont快速实现icon图标显示
文章目录一.iconfont素材网二.iconfont项目设置三.微信小程序项目配置四.全部源码一.iconfont素材网进入iconfont素材网挑选想要的素材,加入购物车点击右上角 ...
微信小程序朋友圈分享图片生成方案实现
在小程序界里,生成图片分享到朋友圈这个功能,是如此得光芒耀眼,以至于各个小程序都趋之若鹜地前来跪倒在她的石榴裙下.不幸的是,微信爸爸并没有提供给我们很好很便捷的相关工具:恰恰相反,屏幕截屏的功能被残忍 ...
微信小程序分享二维码生成
生成微信小程序分享二维码微信小程序官方开放的二维码的接口,其中有一个是生成小程序二维码的,还有一个是圆形的小程序码,我这里就用php生成二维码. 完整代码: public function shar ...
python制作桌面小程序_微信小程序在线制作：快速生成一个餐饮小程序
相信很多餐饮行业的商家都遇到过这类问题:一到用餐高峰期,餐厅内就拥挤不堪,工作人员也忙得不可开交,前厅后厨来回跑,时间长了顾客也等得不耐烦.此外,外卖平台的高额抽成也让普通餐饮商家生存越来越艰难.本来 ...
微信小程序二维码如何生成？
微信小程序二维码能够方便小程序的推广,那么微信小程序的二维码如何生成?微信小程序二维码都有哪些? 正式二维码在"设置"中查看小程序的正式二维码,该二维码只用于访问小程序的线上正式 ...

微信小程序使用base64字体图标（生成字体图标+将字体图标转为base64格式）

微信小程序使用base64字体图标（生成字体图标+将字体图标转为base64格式）相关推荐

最新文章

热门文章

微信小程序使用base64字体图标 （生成字体图标+将字体图标转为base64格式）

微信小程序使用base64字体图标 （生成字体图标+将字体图标转为base64格式）相关推荐

最新文章

热门文章

微信小程序使用base64字体图标（生成字体图标+将字体图标转为base64格式）

微信小程序使用base64字体图标（生成字体图标+将字体图标转为base64格式）相关推荐