UNI-APP 使用 ICONFONT

本文记录了在uni-app项目中引入iconfont的方法。因uni-app不能使用本地字体图标库,需将所需图标加入购物车生成在线代码,下载项目解压取出iconfont.css文件,用在线代码替换其中的@font-face并加https:前缀,最后在项目中引入修改后的文件。

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

使用 uni-app 做项目时需要用到 iconfont。和 web 使用略有差别。谨以此记录。

因为 uni-app 不能使用本地字体图标库,所以不能直接下载使用。

1、将iconfont中需要的图标,加入购物车,然后放到项目。生成在线代码,稍后用。

2、下载项目至本地。然后解压取出 iconfont.css 文件。

3、将 1 中的在线代码 copy 替换掉 iconfont.css 中的 @font-face。并且加上前缀 https: 。完成后如下:

这样就是引用的 阿里巴巴的 在线图标库了。

4、在项目中需要的地方引入 这个改好的 iconfont.css 文件。

HTML 部分:

使用图表有两种 方法:如上所示。其中 selfStyle 是自己设置的 图标样式,就可以像设置字体那样设置了。

至此,完成。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值