微信小程序图标(微信小程序怎么开通)

前言

最近接手了一个微信小程序，发现里面的图标都是用的图片组件。看起来很别扭，加载不流畅。

就是想看看微信有没有类似的logo库可以用。

有，有，但是太少了。好像只有八种，不够。

微信小程序图标(微信小程序怎么开通)

如果官方没有，只能自己做，或者阿里的iconfont管用。首先你得有一个iconfont账号。

1、将你心仪的图标加入购物车

微信小程序图标(微信小程序怎么开通)

2、将图标添加至项目

单击右上角的倒数第二个图标进入购物车，然后将购物车添加到我们的项目中。任何项目都不能自己创建。

微信小程序图标(微信小程序怎么开通)

3、我的项目

当你进入我的项目，你可以看到我们刚刚加入的图标。我的项目位于资源管理-我的项目的顶部。

微信小程序图标(微信小程序怎么开通)

4、将项目下载至本地

解压缩后，您将看到以下文件

微信小程序图标(微信小程序怎么开通)

5、将字体转换为base64

去网站:https://transfonter.org/,在文件中找到iconfont.ttf字体文件，将字体文件转换成base64。

记得在步骤2中打开Base64编码。

微信小程序图标(微信小程序怎么开通)

下载并解压缩后，您将获得以下文件

微信小程序图标(微信小程序怎么开通)

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就可以在项目中使用了。

微信小程序图标(微信小程序怎么开通)

微信小程序图标(微信小程序怎么开通) & ltview class = & # 34图标字体图标-姬扁& # 34；& gt& lt/view & gt；

至此，我们自定义的Icon图标就制作完成了

作者:喝酒不带感情

原地址:https://www.cnblogs.com/cool-net/p/16107773.html

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。

作者：美站资讯，如若转载，请注明出处：https://www.meizw.com/n/27322.html