layUI系统图标显示异常，在数据表格上文字图标显示为口

layUI数据表格上文字图标不显示问题

问题描述

使用layUI时，系统图标显示异常，特别是在数据表格中。如下图示：

问题原因

layUI中用到的系统图标使用的是【& #xe770;】这样的文字格式，并不是以png之类的图片格式。事实上，他其实还是图片格式，只不过系统内置把文字转成了图片的样子而已。不会真有人天真的以为几个简单的文字就真的能存储图片吧…
既然这个文字事实上存储的并不是图片，那么他要展示出图片效果，必然就得有一个标记告诉系统这个不是文字而是图片，不然他怎么知道什么文字要转换什么文字不转呢？
查看官方API可以看到，他需要依赖的是class属性为layui-icon

验证

咱们去系统能正常显示图片的地方看看，可以看到这个正常显示的图标是有class=&＃8217;layui-icon’的。

再来看看数据表格上，显然并没有class=&＃8217;layui-icon’这个属性

思考

那么问题来了，这个数据表格中没有class=&＃8217;layui-icon’怎么办？显然对于框架而言，数据表格这种东西是框架自动生成的，我们并没有快而有效的篡改他的方法，并不能直接在这个行的div上都加上class=‘layui-icon’。
但是，我们可以在这个div中嵌套一个标签，这个嵌套进来的标签是我们加进去的，岂不是想给他什么样的class就给她什么class，甚至style之类的都可以了。

问题解决