新的一天
新的一天
  • 发布:2019-01-03 10:04
  • 更新:2022-11-19 17:12
  • 阅读:26306

uni-app 引入本地iconfont的正确姿势

分类:uni-app

iconfont文件里面包含 iconfont.ttf、iconfont.css, 将 iconfont.ttf文件转位 base64。
推荐转换工具地址:https://www.giftofspeed.com/base64-encoder/

然后打开 iconfont.css文件,修改 @font-face 部分,将转换好的 base64代码粘贴到对应位置,并且设置 代码如下:

@font-face {  
  font-family: "iconfont";  
  src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');  
}  
.iconfont {  
  display: inline-block;  
}

最后则再项目中App.vue中引入iconfont.css文件

<style>  
@import "./font/iconfont.css";  
</style>

在任意组件中使用方法:

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

经测试在H5及小程序中可以正常使用

备注:
iconfont文件是使用的阿里图标库: https://www.iconfont.cn

12 关注 分享
3***@qq.com 1***@qq.com wangjiakia Near_Li 3***@qq.com l***@163.com 1***@163.com machi的奶茶 4***@qq.com 5毛钱特效 ningx 一路格桑花

要回复文章请先登录注册

2***@qq.com

2***@qq.com

回复 4***@qq.com :
解决了吗
2022-11-19 17:12
谭小谭

谭小谭

回复 1***@qq.com :
你照着这个教程来就行:https://www.cnblogs.com/gfweb/p/11069062.html
2021-10-14 11:43
1***@qq.com

1***@qq.com

回复 谭小谭 :
解决了吗 遇到同样的问题
2021-10-12 11:06
r***@163.com

r***@163.com

感谢,解决了我的问题
2021-05-24 10:29
k***@126.com

k***@126.com

回复 k***@126.com :
css class 不应该被提示 注册,不能理解为什么会被Vue warn
2020-09-21 14:35
k***@126.com

k***@126.com

问问大家有没有注意到,uniapp 提示:Unknown custom element: <iconfont>
2020-09-21 14:29
4***@qq.com

4***@qq.com

在app 里面没显示
2020-07-14 19:48
谭小谭

谭小谭

app v3模式下不可用
2020-06-01 15:37
5毛钱特效

5毛钱特效

秀啊 大兄弟
2020-02-29 18:47
2***@qq.com

2***@qq.com

为什么我按照你的方法,在小程序上运行起来只有一个方框
2019-11-22 15:59