微信小程序引入iconfont图标

原创 已于 2023-04-25 16:59:54 修改 · 706 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序

于 2023-01-06 12:53:43 首次发布
文章介绍了在微信小程序中如何使用Iconfont。首先查看iconfont项目设置，然后生成在线链接以应对小程序不支持静态文件的问题。接着，将下载的iconfont.css转换配置到app.wxss，因为小程序只支持wxss。原始使用方法是在view标签中添加class，而使用VantWeapp框架时，则需设置class-prefix和name属性。

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

一、查看iconfont项目设置

二、生成在线链接

为什么要生成在线链接，因为微信小程序不能用静态文件

三、根据下载的iconfont.css配置app.wxss

下载的iconfont.css配置

 自定义app.wxss配置

 

为什么不直接用iconfont.css，因为微信小程序不支持css只支持wxss

四、原始使用方法

<view class="iconfont icon-lanya"></view>

五、Vant Weapp使用方法

<van-icon class-prefix="iconfont" name="lanya" />

微信小程序中使用iconfont的详细教程
AI小美好
11-24 2965
本文详细介绍了微信小程序中使用iconfont的原因，优势，场景以及详细的操作步骤，便于你快速自定义字体图标。
微信小程序使用 iconfont 彩色图标
我是写BUG的博客
10-19 490
当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。
微信小程序 -- 引入 iconfont 矢量图标（Font class ）
m0_72951245的博客
12-01 926
微信小程序引入 iconfont 矢量图标（Font class ）;
Uniapp 开发微信小程序使用 Iconfont 底部 TabBar 不显示问题
最新发布
不二菜菜子的博客
05-08 900
如果问题仍未解决，可以检查微信开发者工具的控制台是否有相关错误提示.确保图标路径正确，微信小程序要求路径必须从项目根目录开始。如果图标尺寸过大或过小，可能导致显示异常。：部分问题在开发者工具中可能不显现，务必真机测试。将 Iconfont 下载为 png 格式。最大不超过 200px * 200px。标准尺寸：81px * 81px。：正常状态和选中状态，放在。选中状态有明显视觉差异。
微信小程序如何引入Iconfont
weixin_39553363的博客
08-05 4146
通过上述步骤，你可以在小程序中成功引入 Iconfont，以使用自定义的图标。请确保在应用图标前已经选择并添加所需的图标到 Iconfont 项目中，并按照上述步骤正确引入样式文件。打开 Iconfont 网站（https://www.iconfont.cn/）并登录账号，创建一个项目并添加所需的图标到项目中。是你在 Iconfont 中选择的图标的类名，通过添加类名即可在小程序页面中使用相应的图标。文件复制到你的小程序项目的目录中，通常是放在。在你的小程序项目的app.css样式文件中引入。
微信小程序使用iconfont图标
weixin_48166795的博客
11-20 5495
在微信小程序中使用iconfont图标的方法
微信小程序之使用iconfont
weixin_44943855的博客
02-05 1660
icon图标无法显示可能原因，小程序的wxss文件font-face的url不接受http地址作为参数,因此要先将字体文件下载后,转换为base64（7.下载下来的文件中的css文件内容，替换放入项目的iconfont.wxss的@font-face内容，可以就保留一个src, 不然文件会有点大。4.将上面的iconfont.css拷贝到自己的项目中，并将后缀改为.wxss(因为微信小程序支持的是wxss)3.icontfont-资源管理-我的项目， 选择刚才保存的项目，点击下载到本地。
微信小程序引用iconfont图标的方法
10-17
微信小程序引用iconfont图标的方法知识点： 1. 微信小程序中引用iconfont图标的基本概念：iconfont图标，又称字体图标，是一种通过字体文件显示的矢量图标。它可以像字体一样被调整大小、颜色等属性，并且由于是...
微信小程序引入iconfont彩色图标(Symbol方式)
gyueh的博客
06-24 5195
进入https://www.iconfont.cn/官网 将需要的图标添加到购物车，点击购物车将图标添加至相应的目标项目中 打开目标项目，下载代码至本地 将下载的文件进行解压，命名为iconfont Window+R打开控制面版，输入cmd—点击enter键 切换到iconfont文件夹 输入命令行：npm install -g iconfont-tools----点击enter键 运行命令行： iconfont-tools----点击enter键 出现如图所示的内容，按图示输入文件名即可 打开ic.
微信小程序引入 iconfont 图标
dark_cy的博客
06-20 845
　　下图的左上角有三种模式，Unicode、Font class 和 Symbol。选中 Font class 模式，然后点击【点击复制代码】下面的链接，将链接里面的代码（如图二）复制到项目里即可。 　　之前我都是用的 Font class 模式，但是上星期 iconfont 官网维护之后，我加了新图标更新代码的时候弹出了下面的提示，说要下载至本地使用。　　小程序上我还没用过本地的 iconfont 图标，于是我就去百度怎么引入，有些博客说小程序不支持加在本地字体文件，要转成 Base64 的格式引入才可以
在微信小程序中如何引入iconfont
sayyy的专栏
10-07 3371
略
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
m0_62823653的博客
06-20 7359
由于微信小程序线上的资源限制了各种接口安全域名，所以在小程序里如果想使用iconfont字体图标就会稍有不同，其实只需要把平时的iconfont字体图标远程路径换成base64引入，就可以解决小程序引入iconfont字体图标这个问题了1.将想要的图标添加入库并下载代码：二、下载成功后，将得到一个名为 "download.zip" 的文件，然后解压得到这么一堆文件：推荐去 https://transfonter.org 转换1.配置选项，将配置改为如下红色框所示，并打开 Base64 encode 选项：
微信小程序--引入iconfont
You_wil_see的博客
10-08 307
首先呢，我们先进入阿里的iconfont官方页面：iconfont-阿里巴巴矢量图标库 在其中选入自己选好的图标，点击右上角的购物车中，没注册的先注册， 之后点击font class，在点击获取在线链接，将整段链接复制到微信开发者小程序的一个文件中，我的是styles中的wxss文件， 之后便到全局样式文件app.wxss中导入刚刚的文件。 最后到pages中的demo首页导入icon font.wxss中的类就可以了。 ...
微信小程序使用 iconfont
前端挖掘机
03-11 1064
base64。
微信小程序里使用iconfont
小蓝人的博客
07-28 1019
3、将iconfont.css扩展名改成wxss文件放到项目的assets文件下，其它的文件就不需要了，然后将这段转化后的@font-face替换到原先的iconfont.css文件中的@font-face。注微信小程序里本身不支持通过url引入外部文件的方式，所以要将引用的文件转成引用。2、解压缩，将其中的.ttf字体格式文件进行转化。4、在app.wxss中引用iconfont。将iconfont.ttf字体文件上传，1、下载fontClass版图标。...
微信小程序中使用iconfont(阿里矢量图标字体)
热门推荐
huangpb的博客
07-11 1万+
在微信小程序中使用 iconfont 主要有两种方式，第一种是使用 Font class 方式，第二种是使用 Unicode 方式。 方式一：Font class 方式 1. 在 http://iconfont.cn/ 选择你想要的图标，选择 Font class 类型并下载到本地。 2. 解压下载到本地的压缩包，将里面的 iconfont.css 文件复制到你的项目中，并将后缀名改为 ...
微信小程序引入iconfont
12-29
### 如何在微信小程序中集成和配置 Iconfont 图标字体 #### 准备工作 为了能够在微信小程序项目里使用 Iconfont 的图标，首先需要注册账号并登录到 [Iconfont](https://www.iconfont.cn/) 平台，在线创建属于自己的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值