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

她左右
• 阅读 1854

网站图标要想做到清晰无锯齿,使用普通图片或者雪碧图都很难达到这个目的,一般我们都会引入字体图标(svg转font,使用图标像使用字体一样,详见《web页面使用字体图标》,那么如何在微信小程序中使用自定义图标呢?请看详细步骤:

1、从阿里图库上选择喜欢的图标加入购物车,在购物车弹窗中点击“下载代码”后,解压

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

阿里图库 加入购物车

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

购物车 下载代码

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

图标文件内容

2.、进入transfonter导入第1步得到的iconfont.ttf文件,打开“Base64 encode”开关(Family support是默认打开的),勾选“TTF”选项(仅这一项,其他选项取消勾选)

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

transfonter设置

3、点击“√Convert”按钮,点击“Download”下载压缩包,解压

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

下载transfonter

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

transfonter文件内容

4、打开第2步得到的stylesheet.css文件,全选复制,替换第1步得到的iconfont.css文件中的@font-face{……}代码

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

代码替换

5、将第3步得到的css文件重命名为iconfont.wxss,放入小程序utils目录

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

重命名为iconfont.wxss

6、在app.wxss文件顶部引入字体样式文件:@import "./utils/iconfont.wxss";

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

app.wxss引入字体样式

7、完成!

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

成功展示自定义图标

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皮卡皮卡皮 皮卡皮卡皮
2年前
「uniapp」自定义iconfont
1.进入2.搜索自己需要的图标点击加入购物车中3.将购物车中的图标添加到项目中首先进入购物车点击添加至项目,没有项目就新建一个项目4.将图标下载至本地5.将文件复制到uniapp项目中//将.ttf文件@/common引入@fontfacefontfamily:"iconfont";/Projectid2570483
CuterCorley CuterCorley
2年前
uni-app入门教程(9)字体库、自定义组件、打包和新闻实战
前言本文主要介绍了4方面内容:在uniapp项目中使用iconfont提供的图标字体库,美化页面;实现自定义组件,并且可以自定义属性和实现父子组件之间的消息传递;微信小程序预览和真机测试,APP端云打包和本地打包;新闻列表和详情实战练习。一、使用iconfont字体库uniapp中可以使用iconfont()提供的图标字体。大致过程如下:
梦
3年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Wesley13 Wesley13
2年前
java反射, 不看你可别后悔
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,
Stella981 Stella981
2年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Stella981 Stella981
2年前
Shodan的http.favicon.hash语法详解与使用技巧
  在Shodan搜索中有一个关于网站icon图标的搜索语法,http.favicon.hash,我们可以使用这个语法来搜索出使用了同一icon图标的网站,不知道怎么用的朋友请参考我上一篇(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fmia
Wesley13 Wesley13
2年前
Java8中的LocalDateTime工具类
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,
Stella981 Stella981
2年前
JOptionPane修改图标
1.在Linux平台下.JOptionPane会显示Java默认的图标,在window平台不显示图标,如何替换这个图标了?2JOptionPane.setIcon(Icon)修改的是内容区域的icon,而不是左上角的Icon.所以需要通过修改Jdialog/Frame的图标来达到修改默认图标的问题.3.代码:if(JOptio