微信小程序引入iconfont图标

文章介绍了在微信小程序中如何使用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 图标字体 #### 准备工作 为了能够在微信小程序项目里使用 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、付费专栏及课程。

余额充值