Uni-App在小程序引入iconfont图标的解决方案(有图有真相)

看了网上很多的解决方法,都不行,最后还是解决了。

绝大部分报错的应该都是 路径引入问题,如下图:

结果网上找了很多方案,都没办法解决(uni-app更新后应该是帮大家解决了这个问题)- 本文适合刚入门 uniapp 的小白 - 

1.先从iconfont网站上 本地下载项目文件

2.然后把iconfont.css 这一个css文件 拷贝到 任一文件下就行(个人建议在static下)

3.iconfont网站上在点击生成代码,然后点击复制代码,只需要ttf格式的地址就行 ---> src: url('//at.alicdn.com/t/font_1667580_2275ydhdx8x.ttf') format('truetype')

4.网上说的需要在 //at前面 加 https 和 font-family 的 名称 都换掉,现在uniapp的版本已经不需要了,加上https就会报错。

5.组件中使用字体图标

6.最后在App.vue 的 style标签下 引入 我们的 iconfont.css

7.最后刷新小程序,我们的图标就出来了。


喜欢的 可以收藏噢 ~ 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容