微信小程序引入字体图标 1

微信小程序中使用字体图标需要将ttf文件编码为base64才能使用。网上查一般使用：https://transfonter.org/，进行在线转换，我在使用该网站时，无法成功上传文件，只能想别的办法。

使用https://www.motobit.com/util/base64-decoder-encoder.asp该网站编码ttf文件

一、准备好自己的字体图标库

例如：https://icomoon.io/app/#、或者阿里巴巴字体图标库，在这些网站上生成自己需要的图标库之后下载文件，解压后文件结构如下：

需要关注的是font文件和style.css文件。如果在一般网页使用，则直接将font文件夹以及style.css文件剪切到自己的项目文件中去，即可通过添加对应类名使用字体图标。

二、ttf转码base64

在 https://www.motobit.com/util/base64-decoder-encoder.asp 网站里打开font文件下的.ttf文件：

转换完的base64编码段是带有换行符的，我们需要将换行符消除，可使用sublime text3或者其他ide进行正则匹配消去:

三、制作字体图标css文件

对style.css进行备份（怕整坏哈），接下来对style.css进行修改：

主要修改成这样：

@font-face {
font-family: 'wxmemo-icon';

src:url(data:font/truetype;charset=utf-8;base64,base64编码段) format('truetype');

}

修改后截图：

之后可以将修改后的style.css文件引入自己的项目中，使用代码：

<span class="icon icon-abandon"></span>

到此运行可看到图标正常显示：

微信小程序引入字体图标 1相关推荐

微信小程序引入字体图标
小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: 一.去官网 http://iconfont.cn 下载 ...
微信小程序引入阿里巴巴图标库（不下载）
微信小程序引入阿里巴巴图标库(不下载)@TOC 阿里图标地址:https://www.iconfont.cn 第一步:选择资源管理-我的项目-选择Font class-查看在线链接-点击下方css链接 ...
微信小程序引入阿里巴巴图标库
微信小程序引入阿里巴巴图标库在阿里巴巴图标库下载需要的图标,得到iconfont.wxss文件. 将iconfont.wxss文件放在style目录下. 在app.wxss引入,页面里面添加代码 @ ...
微信小程序iconfont字体图标文件无法上传问题
最近在写毕业设计的时候,因为微信小程序本身的字体图标无法满足我的开发需求,但是在引入之后发现开发工具预览没问题但是真机调试就出现了问题, 在查阅资料后找到了解决的办法.我将原本放在static下的字体 ...
微信小程序引入iconfont图标，解决渲染层失败（2022年7月11日）
前言网上的教程几乎都是清一色的引用阿里云矢量图标的在线链接,可惜现在阿里现在已经没有在线链接了. 解决方法然后我吧文件下载到本地尝试引用,抱歉woff文件识别不了,微信小程序是没法直接识别woff ...
uniapp微信小程序引入字体
案例演示小程序有些字体不支持,我们如何引入,步骤如下: 第一步:下载需要的字体第二步:如果只是用其中的数字,则需要使用工具单独再摘出来,这样文件会很小. 生成新的字体文件,此文件大小很小. 第三步 ...
基于uni-app的微信小程序引入字体文件
上传字体文件至服务器或者oss(也可以引入第三方,需支持nginx跨域) 引入字体文件(两种方法) css引入 @font-face {font-family: 'fontFamily';src: u ...
微信小程序使用字体图标的方法iconfont
一. 先到阿里巴巴矢量图标库,搜索你想要的图标,然后添加入库. 将使用到的图标加入购物车点击购物车下载代码获取字体库文件二. 到这个平台 https://transfonter.org,把刚才 ...
微信小程序——引入第三方图标、图标组件
这里以Iconfont 为例 iconfont-阿里巴巴矢量图标库一.直接引用创建一个图标项目,名字自定义,我的是fontIcon, 注意项目的前缀和font family两处自己定义的名字 ...
微信小程序设置字体无效_微信小程序自定义字体及自定义图标问题说明
自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关讨论: Q:小程序开发时能否使用我们自定义 ...

微信小程序引入字体图标 1

微信小程序引入字体图标 1相关推荐

最新文章

热门文章