利用微信小程序制作属于自己的Icon图标
目录
- 前言
- 1、将你心仪的图标加入购物车
- 2、将图标添加至项目
- 3、我的项目
- 4、将项目下载至本地
- 5、将字体转换为base64
- 6、样式文件修改
- 7、重命名
- 8、导入样式文件并使用
- 总结
前言 最近在接手一个微信小程序，发现里面的图标都是使用的image组件，看起来非常别扭，加载也不太顺畅。
就想着看看微信有没有类似自带的图标库可以使用。
有是有，就是太少了，翻来翻去好像也就 8 种，不太够用啊。
文章图片
官方没有就只能自己做了，还是阿里的iconfont好使，首先你得有iconfont的账号。
1、将你心仪的图标加入购物车
文章图片
2、将图标添加至项目 点击右上角倒数第三个图标进入购物车，然后将购物车添加到我们的项目中，没有项目可以自行创建。
文章图片
3、我的项目 进入到我的项目可以看到我们刚刚加入的图标，我的项目在最上方的资源管理 — 我的项目。
文章图片
4、将项目下载至本地 解压后你会看到如下文件
文章图片
5、将字体转换为base64 进入网站：https://transfonter.org/ ，找到文件中的 iconfont.ttf 字体文件，将字体文件转换为 base64。
记得开启第2步的 Base64 encode。
文章图片
下载并解压后你将会获得如下的文件
文章图片
6、样式文件修改 同时打开第 4 步下载解压的 iconfont.css文件和第 5 步，下载解压的stylesheet.css文件。
我们先看confont.css文件，红圈中的代码直接删除
文章图片
再打开stylesheet.css文件，将红圈中的代码复制到confont.css文件中去
【利用微信小程序制作属于自己的Icon图标】
文章图片
7、重命名 给confont.css重命名为 xxx.wxss，并放到微信小程序项目中去，注意：后缀必须是wxss
文章图片
8、导入样式文件并使用 在app.wxss中导入我们的 xxx.wxss，我们生成的 icon 图标就可以在项目中使用了。
文章图片
文章图片
至此，我们自定义的Icon图标就制作完成了
总结 到此这篇关于利用微信小程序制作属于自己的Icon图标的文章就介绍到这了,更多相关微信小程序 Icon图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
推荐阅读
- 微信小程序选择图片控件
- [C语言小白]三子棋小程序
- 投稿|何小鹏：新能源路上的理想和未来
- 投稿|小鹏汽车，何时构建起护城河？
- 阿里云专利缴费小程序丨如何在一分钟为多项专利缴费（）
- 投稿|亏损扩大、现金储备减少，小鹏正在学着“省钱”
- 移动支付|PayPal入华迈出关键一步，但难以撼动微信、支付宝国内地位
- 计算机入门的一些常用小技巧总结
- 投稿|中小企业自救日记：在困顿中寻找希望
- Linux系统编程线程栈大小