微信小程序使用自定义图标，使用阿里图标库教程

7月前作者：小白的实习记录分类：Toy博客阅读(39) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序使用自定义图标，使用阿里图标库教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、去阿里图标库选择我们需要的图标并下载下来

贴一个阿里图标库的地址：iconfont-阿里巴巴矢量图标库

微信小程序图标库,微信小程序,小程序

微信小程序图标库,微信小程序,小程序

没有项目的自己创建一个就好了，添加进自己的项目里

微信小程序图标库,微信小程序,小程序

点击第三步的链接打开后就是这样的

微信小程序图标库,微信小程序,小程序

把里面的内容复制下来

在你微信小程序的项目里新建一个这样的文件，把之前复制的内容粘贴进去。

微信小程序图标库,微信小程序,小程序

修改app.wxss文件，import 我们刚才新建的文件

微信小程序图标库,微信小程序,小程序

然后我们就可以在任意一个页面内使用我们的图标了

微信小程序图标库,微信小程序,小程序

当然你也可以用vant-weapp 组件库中的 vant-icon 组件。如下

微信小程序图标库,微信小程序,小程序

如果对vant-weapp组件库感兴趣的话可以去看看

我贴一个链接：介绍 - Vant Weapp (gitee.io)

我教的这个是用的线上版的，没有把图标的项目下载到本地。

如果你想下载下来本地使用的话，你需要把 .ttf的文件转换成base64格式。因为小程序不支持 .ttf文件的格式。

第一步：先把图标的项目下载下来并且解压，接下来就是把 .ttf文件的格式转换一下

微信小程序图标库,微信小程序,小程序

第二步：转换格式，贴一个地址用于转换格式：Online @font-face generator — Transfonter

微信小程序图标库,微信小程序,小程序

第三步：转换玩后下载下来

微信小程序图标库,微信小程序,小程序

把下载下来的文件解压出来，红框是我解压出来的文件

微信小程序图标库,微信小程序,小程序

第四步：在微信小程序中新建一个文件，步骤跟上面使用在线地址一样。这是我的目录和文件名

微信小程序图标库,微信小程序,小程序

然后把转换后的stylesheet.css文件的内容全部复制到我们新建的iconfont.wxss文件里

微信小程序图标库,微信小程序,小程序

再把我们下载的并且解压出来的图标项目中的iconfont.css文件打开复制里面的内容到我们新建的iconfont.wxss里，除了框住的不要，其他都要

这是我复制粘贴完后的iconfont.wxss文件

微信小程序图标库,微信小程序,小程序

第五步：修改app.wxss文件，跟上面使用在线地址的方式一样。

在页面使用的的方式也是跟在线地址的方式一样

微信小程序图标库,微信小程序,小程序

ok，到这里两种使用阿里图标库的方法已经讲完了。如果还有什么问题，就赶快去百度，问我的话可能回复不及时。文章来源地址https://www.toymoban.com/news/detail-697008.html

到了这里，关于微信小程序使用自定义图标，使用阿里图标库教程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

微信小程序引入外部矢量图标（阿里巴巴矢量图标）

进入阿里巴巴矢量图标库搜索想要的矢量图标并加入购物车，点击右上角购物车将图标添加至项目更改项目设置将字体格式设置为TTF Base64 点击下载至本地在微信小程序中新建文件夹将下载到本地的文件中的iconfont.css拖拽到微信小程序新建的文件夹中更改后缀名

2024年02月16日
浏览(54)
定义tabbar，以及解决原生微信小程序使用vant的tabbar的bug（点击俩次图标才正确激活）

详细步骤，可以参考小程序官方给出的文档: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 在 app.json 中的 tabBar 项指定 custom 字段在代码根目录下添加入口文件: custom-tab-bar用自定义组件的方式编写即可，用自定义组件的方式编写即可，该自定义组件完全接

2024年04月14日
浏览(29)
解决微信小程序自定义tabbar跳转页面图标闪动问题

情况一如果你的tabbar对应的页面是component，那就在component下面加上其中的selected是该tab页面对应的索引值情况二如果你的tabbar对应的页面是page，那就将上面的if判断写在page的onshow里面闪动问题就解决啦~

2024年02月12日
浏览(47)
微信小程序左上角home图标的解决方法之一层级混乱导致的home图标显示的问题自定义左上角左侧图标的返回路径

这个项目的编辑页在tabbar上导致跳到tabbar得使用wx.switchTab 保存后返回原来的页面就出现了左上角的home图标本来想通过自定义home图标的跳转路径来解决这个问题没想到居然找不到相关内容有清楚的朋友麻烦给我留个言不胜感激那我写一下我的骚操作这就是观察记录页面

2024年02月11日
浏览(31)
微信小程序自定义tabBar，顺利通过阿里前端岗面试

我的 /components/index-tabbar/index.js Component({ properties: { active: { type: String, value: ‘index’ }, }, methods: { onChange(event) { wx.redirectTo({ url: /pages/${event.detail}/index , }) } } }) 模拟的 tabbar 页面写法如下： /pages/home/index.json { “usingComponents”: { “index-tabbar”: “/components/index-tabbar/index” } } /pa

2024年04月13日
浏览(35)
微信小程序使用iconfont图标

一、第一步进入iconfont网站 1.添加需要使用的图标，点击购物车图标加入项目 2.点击右上角的购物车按钮 3.点击添加项目按钮，选择一个项目添加即可，若没有项目，可以创建 4.添加完项目会自动跳转到下一个页面，点击font class 生成在线链接 5.复制生成的链接，去

2024年02月08日
浏览(47)
微信小程序使用字体图标——链接引入

目录 1.下载字体图标 1.选择需要的图标加入购物车添加到项目 2.查看项目 3.生成在线链接 4.复制生成的链接等下放到iconfont.json中编辑 2.引入链接 1.下载 2.生成iconfont.json文件 3. 在iconfont.json中放入生成的链接 4.需要重新编译小程序之后在终端执行 5.在app.json中引入字

2024年02月16日
浏览(69)
微信小程序项目中使用icon图标

效果：步骤： 1、先让ui负责人把你的账号加入到项目中，加入到项目中后就可以在icon图标库中看到该项目 2、在小程序中使用新建一个view，在上面加一个class，复制icon名字上去即可，注意格式，格式为iconfont icon名。 iconfont这个前缀不是固定的，根据icon名字来，icon的前缀为

2024年02月11日
浏览(44)
微信小程序里使用SVG矢量图标方法

微信小程序里使用SVG矢量图标有2种引入方法：一、SVG图标转换为BASE64编码可以在百度搜索’svg在线转BASE64’（可能会有问题，如下）如下方式同时还需要添加 background-size: contain 属性使图标能根据元素大小自动缩放二、使用运程地址引入SVG图标把SVG图标上传到网站服务器

2024年02月05日
浏览(43)
微信小程序中使用字体图标,解决字体图标包过大的问题

在微信小程序开发中，我们经常使用字体图标来美化界面和展示各种功能。然而，当我们的小程序主包大小超过2M时，可能会遇到一个问题：字体图标的文件很大，导致整个包的大小超出了限制。为了解决这个问题，我们可以使用wx.loadFontFace方法来远程加载字体图标。步骤一

2024年02月12日
浏览(58)