今天记录一下nuiapp开发过程中遇到一个坑点。
iconfont作为前端开发的一个免费图标库,资源充足,经常性的被使用到项目开发中,然而今天在涉足nuiapp开发时,怎么都无法显示图标,应该说只显示了个框:
![](https://img.haomeiwen.com/i14733442/2e343ef03d3314da.png)
可以看到主体部分的图标没有显示出来,左上角却显示出来了,这是为啥,让我再瞅瞅,
![](https://img.haomeiwen.com/i14733442/b9a1067a682e471f.png)
再看看下载的iconfont示例(三种使用方式):
![](https://img.haomeiwen.com/i14733442/8c42ec7c29671f78.png)
![](https://img.haomeiwen.com/i14733442/624405c402f5b8fe.png)
![](https://img.haomeiwen.com/i14733442/2d916053af5202e6.png)
![](https://img.haomeiwen.com/i14733442/1662bea3c6e53055.png)
是的,只有Symbol格式的显示出来了,也就是以svg形式使用的图标,这也忒不方便了,我还是习惯使用fontClass的方式啊,毕竟加一个类名就可以了,然后就找啊找啊,终于偶然中看到了一位大佬的回答:uni-app 不能使用本地字体图标库!
(偷偷看了他的iconfont使用)https://www.cnblogs.com/xguoz/p/10245641.html
难怪路径什么都没问题就是出不来,哎,也怪我太浅薄了,根本不知道这个,能怎么办嘞,只能改成在线使用的方式了(路径前记得添加https:):
![](https://img.haomeiwen.com/i14733442/cf1638eccf8794a6.png)
![](https://img.haomeiwen.com/i14733442/9a549d386928db5e.png)
当然也别忘了后面的iconfont标识(不然找不到):
![](https://img.haomeiwen.com/i14733442/cbf546cb4bb59b56.png)
然后就可以使用了:
![](https://img.haomeiwen.com/i14733442/865d824283d941d9.png)
![](https://img.haomeiwen.com/i14733442/6551fa47ef9a47a5.png)
又破解了一个bug,好吧,好像是自己的问题,
就这样吧,有不对的地方记得提醒我!我也在成为大佬的路上,一步一步...
网友评论