微信小程序引入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 2971
本文详细介绍了微信小程序中使用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 916
如果问题仍未解决，可以检查微信开发者工具的控制台是否有相关错误提示.确保图标路径正确，微信小程序要求路径必须从项目根目录开始。如果图标尺寸过大或过小，可能导致显示异常。：部分问题在开发者工具中可能不显现，务必真机测试。将 Iconfont 下载为 png 格式。最大不超过 200px * 200px。标准尺寸：81px * 81px。：正常状态和选中状态，放在。选中状态有明显视觉差异。
微信小程序如何引入Iconfont
weixin_39553363的博客
08-05 4150
通过上述步骤，你可以在小程序中成功引入 Iconfont，以使用自定义的图标。请确保在应用图标前已经选择并添加所需的图标到 Iconfont 项目中，并按照上述步骤正确引入样式文件。打开 Iconfont 网站（https://www.iconfont.cn/）并登录账号，创建一个项目并添加所需的图标到项目中。是你在 Iconfont 中选择的图标的类名，通过添加类名即可在小程序页面中使用相应的图标。文件复制到你的小程序项目的目录中，通常是放在。在你的小程序项目的app.css样式文件中引入。
微信小程序使用iconfont图标
weixin_48166795的博客
11-20 5499
在微信小程序中使用iconfont图标的方法
微信小程序之使用iconfont
weixin_44943855的博客
02-05 1662
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 5197
进入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 3375
略
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
m0_62823653的博客
06-20 7360
由于微信小程序线上的资源限制了各种接口安全域名，所以在小程序里如果想使用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/) 平台，在线创建属于自己的图标的集合[^3]。 #### 获取图标代码 挑选好所需的图标之后，可以下载对应的 `iconfont.css` 文件以及获取用于嵌入页面的 `<text>` 标签语法。对于微信小程序而言，通常会采用本地化的方式加载这些资源而不是通过网络请求来提高性能[^2]。 #### 安装 mini-program-iconfont-cli 工具 考虑到直接操作文件可能带来的不便，推荐利用命令行工具 `mini-program-iconfont-cli` 来简化这个过程。安装该工具可以通过 npm 或者 yarn 实现： ```bash npm install -g mini-program-iconfont-cli ``` 或者 ```bash yarn global add mini-program-iconfont-cli ``` 此工具能够帮助开发者更方便地管理 iconfont 字体文件，并将其适配至微信小程序环境之中[^1]。 #### 配置与应用 完成上述准备工作后，按照以下步骤继续设置： - 将下载得到的 `.ttf`, `.woff` 等格式的字体文件放置于项目的合适位置； - 修改 app.wxss 或 page.wxss 中的相关样式表规则以引用这些字体文件； - 在 WXML 页面结构内适当的位置加入形如 `<text class="iconfont icon-xxx"></text>` 的标签实例； 具体来说，可以在全局或局部 CSS 文件中添加如下定义以便正确显示图标字符： ```css @font-face { font-family: 'iconfont'; src: url('/path/to/iconfont.ttf') format('truetype'); } .iconfont { font-family:"iconfont" !important; } ``` 最后一步就是确保所使用的类名（即这里的 "icon-xxx"）匹配实际上传至 Iconfont 上面的名字空间了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值