微信小程序图标样式的引用

最新推荐文章于 2025-10-15 14:01:10 发布
原创 最新推荐文章于 2025-10-15 14:01:10 发布 · 1k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #小程序

本文详细介绍了如何在微信小程序中集成阿里图标库的步骤，包括创建style文件，引入iconfont.wxss，复制并粘贴代码，以及在app.wxss中引用。此外，还讲解了如何通过class属性使用选定的icon图标，例如icon-cup。

首先 第一步创建一个style文件，然后在其列表中创建一共iconfont.wxss文件

                                                

然后我们使用 ‘ iconfont 阿里巴巴矢量图标库 ’ 然后点击下面这一串字符

进行全选复制，Ctrl+a 全选

然后再将所有代码粘贴到先前创建的iconfont.wxss文件中

然后就是引用 在我们的app.wxss中使用 @import " ./style/iconfont.wxss";

 最后最最最最重要的是 如何使用 我们选择了这个 icon-cup

然后利用class="iconfont icon-cup" 就可以引用这个图标了

​​​​

 

 

 

 

C_and_H
关注
微信小程序中引入图标
Debug的博客
09-10 1326
第一步百度搜索阿里巴巴矢量图标库 搜索到之后开始查找相应的图标名称 第二步找到对应的图标点击添加到库并添加到项目 第三步添加到项目之后点击font class并点击代码部分（会打开一个新窗口） 然后在新页面复制代码 第六步在小程序项目中新建文件 目录如下 将代码复制到iconfont.wxss中 在具体页面使用时要将他引入到具体页面的wxss中 wxml中使用直接添加具体的图标class类名即可 ...
微信小程序demo：点击tabbar变换图标
06-09
综上所述，这个“微信小程序demo：点击tabbar变换图标”项目涵盖了微信小程序的基本开发流程，包括页面生命周期、状态管理、模板渲染、事件处理、资源引用以及配置文件的使用。通过学习和实践这个示例，开发者可以更...
微信小程序-样式-引入
汪汪的博客
01-30 1560
微信小程序-样式-引入 demo.wxss /* 1 引入的代码 是通过 @import 来引入 2 路径 ： 只能写相对路径 */ @import "../../styles/common.wxss"; common.wxss view{ color: aqua; font-size: 100px; } 示例 ...
微信小程序引入iconfont图标
最新发布
qq_40682410的博客
10-15 225
如果是第一个引入图标，在网站选好图标之后，点击Font class，点击下载到本地，把代码解压放到项目根目录（一般是放到iconfont文件夹下），把iconfont.css改成iconfont.wxss，然后在app.wxss里引入，如果是在原有项目里新增加了图标，不需要再次下载项目了，直接点击Font class，点击生成在线链接，点击链接，跳转css代码，把代码复制到项目了的iconfont.wxss里就行。用text标签使用图标。
【微信小程序---样式引入】
m0_56349322的博客
02-21 1225
1引入的代码是通过@import来引入的 2路径只能写相对路径
【微信小程序】基础篇 -- 自定义组件 -- 创建与引用 &样式（三十二）
JMFive的博客
03-10 6700
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第32篇文章;今天开始学习微信小程序的第17天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
微信小程序如何引入图标
qq_42241873的博客
09-26 3584
微信小程序如何引入iconfont库的图标 学习微信小程序过程中需要引用iconfont库的图标，这里做个总结【从引入到使用】； 网址：上iconfont官网后自行注册个账号； 搜索自己需要的图标，加入到购物车，并自行创建一个文件夹来方便管理图标； 在自己的文件夹中，选择 font class,将生成的代码用网页打开，然后复制网页的代码，将样式放入微信小程序的项目styles文件夹下的iconfont.wxss文件，然后将这个样式文件在全局中引入，这样就可以引用了； 截图如下： 以上就是全
微信小程序根据条件显示样式
05-05
在微信小程序开发中，根据条件显示样式是一种常见的需求，它涉及到动态控制页面元素的可见性、颜色、大小等属性，从而实现丰富的用户交互体验。本文将深入探讨如何在微信小程序中实现这一功能。 首先，我们需要了解...
精选资源
微信小程序开发常用的1600个PNG图标
08-06
在微信小程序的开发过程中，图标是界面设计的重要组成部分，它们为用户提供直观的视觉指示，增强交互体验。这个资源包包含了1600个PNG图标，适用于各种功能和场景，覆盖了微信小程序开发中的多种需求。这些图标可能...
微信小程序中使用自定义图标（阿里icon）的方法
10-18
总结来说，在微信小程序中使用自定义图标（如阿里云图标字体）涉及到引入字体文件、设置和使用@font-face规则以及利用CSS样式展示图标等技术环节。通过理解这些知识点，开发者可以有效地在微信小程序中展示丰富的...
微信小程序input框中加入小图标的实现方法
08-27
微信小程序input框中加入小图标的实现方法 微信小程序input框中加入小图标的实现方法是一种常见的需求，特别是在登录注册页面中。通常，我们可以使用background-image属性来实现，但是微信小程序中并不支持这种方法...
微信小程序图标引用
weixin_49199001的博客
11-13 434
微信里面有很多地方使用到小图标那么图标怎样引用进页面就拿阿里巴巴图标库举例 首先加入购物车 然后添加到项目 生成链接复制代码 在微信小程序utils中新建 .wxss文件（例如：iconfont.wxss） （1）@font-face为第6步复制的代码； （2）.iconfont为文字图标样式； （3）.icon-location:before { content: “\e76f”} 中.icon-location的location是自己命名的图标名称，content: "\e76f"的e76f为文字图
微信小程序——引入 iconfont 矢量图标，如何使用引用阿里巴巴矢量图标
通往成功之路的一个过客
09-19 2189
本文介绍如何在小程序中加入图标，如何使用引用阿里巴巴矢量图标
微信小程序 | 如何引用阿里巴巴Iconfont图标库所给图标
ZM20170703的博客
12-02 1431
保姆级教程，小程序中如何引用官方图标
微信小程序——iconfont 图标的引入
qq_43201350的博客
06-05 457
1、打开阿里巴巴图标库， 点击资源管理，找到我的项目， 点击进入 2、找到项目对应的图标 3、跳转到此页面，然后ctrl + a ， 全选， 复制其内容 4、在小程序中新建style文件夹， 再里面新建iconfont 文件夹， 再新建iconfont.wxss 文件， 再把刚才全选的内容粘贴到里面 5、引入： app.wxss 引入iconfont 图标 app.wxss @import "style/iconfont/iconfont.wxss"; 使用：如在阿里巴巴图标库显示的是这样的图标
微信小程序——页面引用 模块引用
qq_41141657的博客
02-21 3421
ss
微信小程序引入小图标
chenronglong20的博客
03-10 1174
第一步：找到自己需要得小图标复制此链接 第二步：把该链接在浏览器中打开，复制内容到static文件新建css文件夹里 第三步：加https： 第四步：在APP.vue全局中引入 第五步：在结构里引入 效果图： ...
小程序之引用公用样式
weixin_38170695的博客
08-30 388
直接在wxss里面@import就可以了（很简单的，但是还是记录一下吧，毕竟几天没写了，哈哈哈哈） @import "common.wxss" 转载于:https://www.cnblogs.com/liancat/p/9561486.html...
微信小程序iconfont小图标的引入和使用
weixin_50032315的博客
07-07 518
微信小程序中的想要引入字体样式的时候是不支持的，那么我们有时候却需要这个功能所以接下来去介绍一下怎么去引入iconfont的图标库。 1.打开iconfont http://www.iconfont.cn/ 2.新建个项目 3.选择你需要的图标添加到购物车。 4.点击右上角的购物车，把这个图标添加到你的项目中。 5.打开你的项目，点击下载到本地 6.随便解压出来找到iconfont.css文件 7.在你小程序的根目录下创建个styles文件夹，文件夹中新建一个iconfont.wxss的文件，
微信小程序图标分类导航开发源代码
小程序图标分类导航是微信小程序用户界面的一部分，主要作用是帮助用户快速定位和访问小程序内不同的功能模块。本知识点将从微信小程序的基础架构讲起，详细解读小程序图标分类导航的设计和实现方法，以及它在小程序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值