微信小程序使用iconfont图库

最新推荐文章于 2025-06-11 16:59:17 发布
原创 最新推荐文章于 2025-06-11 16:59:17 发布 · 285 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在项目中使用图标字体的方法——Fontclass。通过创建.wxss文件并全局引入，可以在项目中轻松使用图标。具体操作包括创建样式文件、使用@import语句引入图标字体文件，然后在视图元素中应用图标类。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

方式一（Font class）

生成链接
在这里插入图片描述
复制全部代码
在这里插入图片描述
在项目内创建样式文件（切记是以.wxss为后缀）
全局引用，局部引用都是可以的
例如全局引用：

@import "./icons/iconfont.wxss";

<view class="iconfont icon-10"></view>
微信小程序使用iconfont字体图标
www_lyh_624的博客
04-04 451
我是一般直接 下载到本地 其实也就这些文件用的到 把iconfont.css里面的内容直接弄到app.wxss里面，记得改路径，因为字体图标文件我们已经放到了font文件夹里面。 然后就可以直接像下面这些使用它们了。 ...
微信小程序---常用样式和组件
m0_56769104的博客
07-09 1051
在开 Web 网站的时候：页面的结构由HTML进行编写，例如：经常会用到divpspanimga等标签页面的样式由CSS进行编写，例如：经常会采用.class#idelement等选择器但在小程序中不能使用HTML标签，也就没有DOM和BOM，同时仅仅支持部分CSS选择器不过不用担心，小程序中提供了同样的角色：其中WXML充当的就是类似HTML的角色，只不过在WXML中没有divpspanimga等标签，在WXML中需要使用 小程序提供的viewtextimagenavigator。
微信小程序中使用iconfont(阿里矢量图标字体)
huangpb的博客
07-11 1万+
在微信小程序中使用 iconfont 主要有两种方式，第一种是使用 Font class 方式，第二种是使用 Unicode 方式。 方式一：Font class 方式 1. 在 http://iconfont.cn/ 选择你想要的图标，选择 Font class 类型并下载到本地。 2. 解压下载到本地的压缩包，将里面的 iconfont.css 文件复制到你的项目中，并将后缀名改为 ...
01-微信小程序中如何使用阿里字体图标
最新发布
kennyssasas的博客
06-11 430
把鼠标悬浮到要使用的字体图标上面，然后点复制代码，或者直接复制字体图标的类名(没留意过叫什么，应该是叫类名吧)。然后到项目要使用字体图标页面的wxml，用个微信小程序支持的行内标签(我用的是<i>)，把类名粘贴上去就OK啦！5.把复制的页面内容粘贴到项目的app.wxss文件(粘贴到app.wxss，项目里的每个页面都能使用，如果只是某一个页面用到的话，也可以粘贴到对应页面的wxss文件);进入到项目里面，选择font class方式来使用，如果没有生成过代码的同学点生成，已经有代码的直接复制代码;
微信小程序使用 iconfont
前端挖掘机
03-11 1072
base64。
微信小程序之使用iconfont
weixin_44943855的博客
02-05 1668
icon图标无法显示可能原因，小程序的wxss文件font-face的url不接受http地址作为参数,因此要先将字体文件下载后,转换为base64（7.下载下来的文件中的css文件内容，替换放入项目的iconfont.wxss的@font-face内容，可以就保留一个src, 不然文件会有点大。4.将上面的iconfont.css拷贝到自己的项目中，并将后缀改为.wxss(因为微信小程序支持的是wxss)3.icontfont-资源管理-我的项目， 选择刚才保存的项目，点击下载到本地。
微信小程序使用字体图标
热门推荐
生如夏花 炫至茶靡
07-03 8万+
项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。 第一步：下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标，如这里需要一个购物车的图标，流程为： 搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。
vue和小程序项目中使用iconfont的方法
10-15
Vue 和微信小程序作为目前流行的前端技术栈，它们对 iconfont 的使用有着各自的方法和规范。本文将详细解析在 Vue 项目和微信小程序中使用 iconfont 的步骤和注意事项。 ### Vue 中使用 iconfont 的方法 1. 访问 ...
微信小程序上传图片及文件（上传、下载、删除及预览）
Yanxiaona111的博客
11-22 4652
微信小程序上传附件 上传文件及图片 下载，预览、删除 自定义封装组件 哪儿用哪儿调用即可 wxml代码 <!-- <view>上传文件（我是子组件）</view> --> <view class="fileImgAll"> <view class="imginfo" style="border-bottom:{{attachmentImgFile&&attachmentImgFile.length!==0?'1px
uniapp中如何用iconfont来管理图标集成到我们开发的项目中
知码客
03-31 633
我们在开发不管小程序还是APP的过程中都会用到图标这个东西,那么iconfont提供了对应的功能，怎么才能方便的集成到我们的小程序或者APP项目中，目标是方便调用并且方便管理。
小程序组件 —— 29 组件案例 - 字体图标的使用
然后就去远行
01-04 1360
为了解决这个问题，我们可以在微信小程序中创建一个 wxss 文件（如果已经配置了 scss，则可以创建一个 scss 文件而不是一个 wxss 文件），将上面的 css 代码复制即可；在项目中，我们使用的小图标，一般由公司设计师进行设计，设计好之后上传到阿里巴巴矢量图库，然后方便程序员进行使用；在微信小程序中，字体图标的使用方式和网页开发中几乎是一样的，稍微有一些细小的差别，我们在微信开发者工具中进行详细的演示；搜索得到的图标有很多，我们需要根据需求进行筛选，选择符合产品需求的图标；
微信小程序中使用iconfont图标
coding...
10-29 7863
方案一： 利用小程序中不支持 ttf 字体，却支持 base64 的特点，我们可以通过将 ttf 字体转码成 base64 ，再通过 iconfont 的特点，通过设置字体大小和颜色来达到目的。 具体做法： 1.我们可以先去阿里提供的图标库 官网找到我们需要的3个图标， 点击 下载代码 将代码下载到本地~ 2.解压我们刚才下载的包，会有以下这些文件，但对于我们来说，会用到的只有 iconfont....
微信小程序中使用iconfont图标库
DMU_soft的博客
04-21 817
在微信小程序中使用iconfont图标库以及使用iconfont本身的颜色图标
微信小程序中iconfont的使用
weixin_43238931的博客
01-17 243
阿里巴巴矢量图标在微信小程序中的使用方法： 阿里巴巴矢量图库入口>> https://www.iconfont.cn/ 搜索自己想要的图标，点击加入库 在这个地方创建、添加至项目中 复制Unicode中的代码 点击下载至本地 将下载的文件解压，打开iconfont.css 将下面部分内容删除，粘贴上刚才复制的内容 将该文件的内容复制到全局文件app.wxss中 icon的使用方式是： <icon class="icon icon-saoma"></icon>
微信小程序使用iconfont图标
q1004124842的博客
04-28 749
图标的下载和平时一致,主要区别是在使用的时候 1. 引用的路径需要根据文件地址引入 2. 需要对woff文件做转换,转换网站https://transfonter.org/, 开启base64转换 @font-face { font-family: "iconfont"; /* Project id 1183980 */ /* 引用的路径也需要做修改 */ src: url('/style/iconfont.woff2?t=1651111039226') format('
微信小程序使用iconfont
weixin_43430074的博客
05-09 266
网站：https://www.iconfont.cn 注册网站账号 添加图标 创建字体图标样式文件iconfont.wxss在style文件夹下 将浏览器搜索的内容复制style文件夹下的iconfont.wxss 4. 在全局样式文件中导入字体图标样式文件 5. 在页面中使用字体图标 6.显示结果 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刮刮乐打工仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值