在微信小程序中使用iconfont

已于 2022-02-12 16:26:31 修改
阅读量8.8k 收藏 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提供的代码来使用图标。此外，还提供了修改样式和通过事件改变图标颜色的方法。
摘要由CSDN通过智能技术生成

微信小程序上使用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元/天 解锁文章
番薯仔
关注
  • 7
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
小程序中使用iconfont
weixin_43893844的博客
07-19 642
小程序使用iconfont，但没有生成font class怎么办
微信小程序引用iconfont图标的方法
10-17
主要介绍了微信小程序引用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 1000
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 5015
在微信小程序中使用iconfont图标的方法
在小程序中使用iconfont
DargonWisdom的博客
08-10 3882
小程序使用iconfont的使用
微信小程序使用 iconfont 彩色图标
我是写BUG的博客
10-19 301
当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。
微信小程序使用阿里iconfont彩色图标
Sudo
11-28 452
注意：如果出现“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在线icon
m0_56860190的博客
05-10 1574
微信小程序在线使用iconfont 为了节省空间，也可以在线使用
微信小程序中使用iconfont图标
coding...
10-29 7597
方案一： 利用小程序中不支持 ttf 字体，却支持 base64 的特点，我们可以通过将 ttf 字体转码成 base64 ，再通过 iconfont 的特点，通过设置字体大小和颜色来达到目的。 具体做法： 1.我们可以先去阿里提供的图标库 官网找到我们需要的3个图标， 点击 下载代码 将代码下载到本地~ 2.解压我们刚才下载的包，会有以下这些文件，但对于我们来说，会用到的只有 iconfont....
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 4395
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
微信小程序使用iconfont
weixin_43430074的博客
05-09 207
网站：https://www.iconfont.cn 注册网站账号 添加图标 创建字体图标样式文件iconfont.wxss在style文件夹下 将浏览器搜索的内容复制style文件夹下的iconfont.wxss 4. 在全局样式文件中导入字体图标样式文件 5. 在页面中使用字体图标 6.显示结果 ...
微信小程序使用 iconfont
最新发布
前端挖掘机
03-11 674
base64。
微信小程序里使用iconfont
小蓝人的博客
07-28 958
3、将iconfont.css扩展名改成wxss文件放到项目的assets文件下，其它的文件就不需要了，然后将这段转化后的@font-face替换到原先的iconfont.css文件中的@font-face。注微信小程序里本身不支持通过url引入外部文件的方式，所以要将引用的文件转成引用。2、解压缩，将其中的.ttf字体格式文件进行转化。4、在app.wxss中引用iconfont。将iconfont.ttf字体文件上传，1、下载fontClass版图标。...
小程序使用iconfont
kingAn123的博客
05-31 1931
文章目录vue项目使用iconfont一、小程序使用iconfont1. 找到创建的图标库2. 查看生成的样式文件在线链接3. 复制在线链接，直接用浏览器打开4. 小程序中引入iconfont5. 小程序使用iconfont6. 页面使用iconfont二、组件样式隔离导致iconfont无效三、在伪类选择器中使用iconfont1、iconfont作为伪类图标2、iconfont作图片缺省图 vue项目使用iconfont 使用iconfont图标样式库-CSDN 一、小程序使用iconfont 与
uniapp微信小程序怎么修改iconfont图标大小
05-16
你可以通过以下方式修改 uniapp 微信小程序中 iconfont 图标的大小： 1. 在需要使用 iconfont 的页面中，在 `style` 标签内设置 `font-size` 属性： ```css .iconfont { font-size: 24rpx; } ``` 这里将 `font-size` 设置为 `24rpx`，你可以根据你的需求来调整大小。 2. 在需要使用 iconfont 的地方，使用 `text` 组件来渲染 iconfont，并设置 `class` 属性为你在步骤 1 中设置的类名： ```html <text class="iconfont"></text> ``` 这里使用了 `` 这个 unicode 字符来表示 iconfont 中的一个图标。你需要将它替换成你想要使用的图标对应的 unicode 字符。 通过以上步骤，你就可以在 uniapp 微信小程序中使用 iconfont 并修改其大小了。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值