您的位置：首页 > 移动开发 > 微信开发

微信小程序，制作属于自己的Icon图标

2022-04-06 18:03 1896 查看

###前言 最近在接手一个微信小程序，发现里面的图标都是使用的

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
文件中去

####7、重命名 给

confont.css
重命名为 
xxx.wxss
，并放到微信小程序项目中去，注意：后缀必须是
wxss

####8、导入样式文件并使用 在

app.wxss
中导入我们的 
xxx.wxss
，我们生成的 
icon
图标就可以在项目中使用了。

<view class="iconfont icon-bianji"></view>

###至此，我们自定义的

Icon
图标就制作完成了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航