在微信小程序中使用iconfont

已于 2022-02-12 16:26:31 修改
阅读量9.2k 收藏 19
点赞数 7
分类专栏： 个人笔记 文章标签： 微信小程序 小程序 前端
于 2022-02-12 16:26:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46526358/article/details/122897870
版权
本文介绍了如何在微信小程序中使用iconfont图标。首先，通过iconfont平台选取需要的图标并生成font class代码。接着，将代码导入微信小程序的wxss文件，并在app.wxss中引用。在页面中，可以直接复制iconfont提供的代码来使用图标。此外，还提供了修改样式和通过事件改变图标颜色的方法。

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

微信小程序上使用iconfont的方法

一、选取需要的icon

1、在iconfont上选取自己所需要的图标，然后添加到库内
在这里插入图片描述
2、将挑选的图标添加到自定义的项目中
在这里插入图片描述
3、选择生成font class的代码
在这里插入图片描述
4、点击链接进入代码并复制全部

二、在微信小程序中使用iconfont

1、在项目下创建style文件夹，并建立所需要的wxss文件
在这里插入图片描述
然后在wxss文件中将在iconfont上生成的css代码全部复制进去
2、在app.wxss内引用
在这里插入图片描述
3、使用icon

<view class="iconfont icon-shangxiahuadong"></view
最低0.47元/天 解锁文章
小程序使用iconfont
kingAn123的博客
05-31 2024
文章目录vue项目使用iconfont一、小程序使用iconfont1. 找到创建的图标库2. 查看生成的样式文件在线链接3. 复制在线链接，直接用浏览器打开4. 小程序中引入iconfont5. 小程序使用iconfont6. 页面使用iconfont二、组件样式隔离导致iconfont无效三、在伪类选择器中使用iconfont1、iconfont作为伪类图标2、iconfont作图片缺省图 vue项目使用iconfont 使用iconfont图标样式库-CSDN 一、小程序使用iconfont 与
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 5710
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
小程序中如何引用图片库iconfont
最新发布
克里斯蒂亚诺更新的博客
03-05 148
如果有新的图标，将图标再次放入我的项目中，并重新下载后重新放入文件夹中，即可，重复之前的操作。重点文件：iconfont.css和iconfont.ttf ,剩余都是demo的参考。
微信小程序中使用iconfont的详细教程
AI小美好
11-24 2832
本文详细介绍了微信小程序中使用iconfont的原因，优势，场景以及详细的操作步骤，便于你快速自定义字体图标。
微信小程序中使用iconfont(阿里矢量图标字体)
热门推荐
huangpb的博客
07-11 1万+
在微信小程序中使用 iconfont 主要有两种方式，第一种是使用 Font class 方式，第二种是使用 Unicode 方式。 方式一：Font class 方式 1. 在 http://iconfont.cn/ 选择你想要的图标，选择 Font class 类型并下载到本地。 2. 解压下载到本地的压缩包，将里面的 iconfont.css 文件复制到你的项目中，并将后缀名改为 ...
微信小程序之使用iconfont
weixin_44943855的博客
02-05 1557
icon图标无法显示可能原因，小程序的wxss文件font-face的url不接受http地址作为参数,因此要先将字体文件下载后,转换为base64（7.下载下来的文件中的css文件内容，替换放入项目的iconfont.wxss的@font-face内容，可以就保留一个src, 不然文件会有点大。4.将上面的iconfont.css拷贝到自己的项目中，并将后缀改为.wxss(因为微信小程序支持的是wxss)3.icontfont-资源管理-我的项目， 选择刚才保存的项目，点击下载到本地。
微信小程序使用iconfont图标
weixin_48166795的博客
11-20 5319
在微信小程序中使用iconfont图标的方法
微信小程序使用 iconfont
前端挖掘机
03-11 1015
base64。
微信小程序使用 iconfont 彩色图标
我是写BUG的博客
10-19 466
当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。
微信小程序使用阿里iconfont彩色图标
Sudo
11-28 523
注意：如果出现“permission denied”等error信息，记住加上 sudo指令。4️⃣ 最终生成 iconfont-weapp-icon.wxss文件，放在项目中。5️⃣-1️⃣ app.wxss中引入wxss文件以及设置全局样式。2️⃣ 下载iconfont文件同时cd 切换到该目录。iconfont-tools // 生成小程序专用文件。icon开头的名称，都变成t-icon。5️⃣ 其他补充以及使用。5️⃣-2️⃣ 使用。
在小程序中使用iconfont
DargonWisdom的博客
08-10 3950
小程序使用iconfont的使用
小程序中使用iconfont
baidu_41601048的博客
05-01 386
1.下载字体到本地 2 在app.wxss中导入，比如我的路径是@import"./assets/fonts/index.wxss"; 3 点击复制此代码。在浏览器中打开得到代码 4 5注意：如果新添加了图标。在会出现更新此代码。要先点击更新此代码。然后再次点击复制此代码 6 把浏览器中得到的代码复制到@import"./assets/fonts/index.wxss";该路径下的index.wxss中即可 ...
微信小程序中使用iconfont图标
coding...
10-29 7796
方案一： 利用小程序中不支持 ttf 字体，却支持 base64 的特点，我们可以通过将 ttf 字体转码成 base64 ，再通过 iconfont 的特点，通过设置字体大小和颜色来达到目的。 具体做法： 1.我们可以先去阿里提供的图标库 官网找到我们需要的3个图标， 点击 下载代码 将代码下载到本地~ 2.解压我们刚才下载的包，会有以下这些文件，但对于我们来说，会用到的只有 iconfont....
微信小程序使用iconfont
weixin_43430074的博客
05-09 249
网站：https://www.iconfont.cn 注册网站账号 添加图标 创建字体图标样式文件iconfont.wxss在style文件夹下 将浏览器搜索的内容复制style文件夹下的iconfont.wxss 4. 在全局样式文件中导入字体图标样式文件 5. 在页面中使用字体图标 6.显示结果 ...
微信小程序里使用iconfont
小蓝人的博客
07-28 1002
3、将iconfont.css扩展名改成wxss文件放到项目的assets文件下，其它的文件就不需要了，然后将这段转化后的@font-face替换到原先的iconfont.css文件中的@font-face。注微信小程序里本身不支持通过url引入外部文件的方式，所以要将引用的文件转成引用。2、解压缩，将其中的.ttf字体格式文件进行转化。4、在app.wxss中引用iconfont。将iconfont.ttf字体文件上传，1、下载fontClass版图标。...
uniapp微信小程序 中使用iconfont
01-17
### 如何在 UniApp 微信小程序项目中集成和使用 IconFont 图标 #### 准备工作 为了能够在 UniApp 开发的小程序内成功加载并显示来自 IconFont 的图标，需先完成准备工作。访问 IconFont 官网挑选所需图标，并将其加入购物车后创建专属项目[^1]。 #### 文件处理与放置 下载所选图标的压缩包解压后，将其中的 `iconfont.css` 和 `.ttf` 字体文件置于项目的 `common` 或者静态资源目录下以便后续引用[^2]。 #### CSS 引入方式调整 对于已获取到手的 `iconfont.css` 文件，考虑到部分设备可能存在兼容性问题导致图标未能正常展示，建议通过在线工具（例如 Transfoner 提供的服务）把该样式表转化为 Base64 编码形式再行引入，从而规避潜在障碍[^3]。 #### 应用层面上的具体操作 确保上述步骤完成后，在应用入口文件 `App.vue` 中全局注册字体图标： ```javascript // App.vue <style> @import url('/static/common/iconfont.css'); /* 假设放在 static 下 */ </style> ``` 随后便可以在各个组件内部按照既定规则调用这些图标了。比如下面这段代码片段展示了如何在一个视图容器 `<view>` 内嵌套三个不同类型的图标实例: ```html <template> <view> <!-- 使用时只需指定对应的类名即可 --> <view class="iconfont icon-24gl-checklist"></view> <view class="iconfont icon-others"></view> <view class="iconfont icon-unorderedlist"></view> </view> </template> <!-- 如果需要改变颜色，则可以通过额外添加CSS样式实现 --> <style scoped> .icon-24gl-checklist { color: red; } </style> ```
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值