资讯专栏INFORMATION COLUMN

自己制作微信小程序使用base64字体图标

leon / 3450人阅读

摘要:问题微信小程序不能随意使用网络资源,如字体文件等不能在小程序中使用字体文件不能使用背景图片定位来使用内部图片下面就介绍一下如何制作字体图标。简易方式通过两个在线工具,很容易地生成加密的字体图标。

问题:

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

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

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

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

简易方式:

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

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

浏览器打开:https://icomoon.io/app/#/select

选择图标。觉得不够的话,在页面左下角点击"Add Icon From Library...",添加字体库,可以选择免费的,常用的如FontAwsome字体。
选择图标
选择好图标后,点击页面右下角“Generate Font” ->Download,下载字体文件包icomoon.zip
生成图标

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

解压icomoon.zip

浏览器打开:https://transfonter.org/
转换字体
点击“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来改变:

后记:

有些字体图标显示不出来,可能是转换字体时的输出选项有关。

DIY图标字体

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113656.html

相关文章

  • 自己制作信小程序使用base64字体图标

    摘要:问题微信小程序不能随意使用网络资源,如字体文件等不能在小程序中使用字体文件不能使用背景图片定位来使用内部图片下面就介绍一下如何制作字体图标。简易方式通过两个在线工具,很容易地生成加密的字体图标。 问题: 1.微信小程序不能随意使用网络资源,如字体,css文件等 2.不能在小程序中使用字体文件 3.不能使用background-position背景图片定位来使用内部png图片 下面就介绍...

    skinner 评论0 收藏0
  • 信小程序引入字体图标

    摘要:小程序与平常开发中引入字体图标的方式不一样,必须先转为再引入,以阿里巴巴字体图标为例一去官网下载想要的图标将想要的图标添加入库进入购物车下载代码下载成功后,将得到一个名为的文件,然后解压得到这么一堆文件二转换文件为推荐去转换配置选项,将配置 小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: ...

    mayaohua 评论0 收藏0
  • 信小程序引入字体图标

    摘要:小程序与平常开发中引入字体图标的方式不一样,必须先转为再引入,以阿里巴巴字体图标为例一去官网下载想要的图标将想要的图标添加入库进入购物车下载代码下载成功后,将得到一个名为的文件,然后解压得到这么一堆文件二转换文件为推荐去转换配置选项,将配置 小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: ...

    hightopo 评论0 收藏0
  • 信小程序引入字体图标

    摘要:小程序与平常开发中引入字体图标的方式不一样,必须先转为再引入,以阿里巴巴字体图标为例一去官网下载想要的图标将想要的图标添加入库进入购物车下载代码下载成功后,将得到一个名为的文件,然后解压得到这么一堆文件二转换文件为推荐去转换配置选项,将配置 小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: ...

    doodlewind 评论0 收藏0
  • 程序开发 第二篇:使用信小程序开发者工具、wepy框架初始化项目

    摘要:上一篇小程序开发第一篇注册获取同步企业项目数据微信小程序开发者工具下载小程序开发者工具使用小程序原生开发直接使用小程序开发者工具打开项目即可小程序框架开发首选官方提供类开发框架,备选。 上一篇:小程序开发 第一篇:注册、获取unionid同步企业项目数据 1.微信小程序开发者工具 下载:小程序开发者工具 使用: 小程序原生开发:直接使用小程序开发者工具打开项目即可 小程序框架开发:...

    ivan_qhz 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<