问题:

上面这样写，图标能显示出来。

上面这样，从后台获取图标只显示一个字符串，不显示图标。样式引入是没问题的。

我用的是springboot+ssm+thymeleaf。

下面是我的解决方案：

js中增加：data.field['icon']=$('#icon').text()，$('#icon').text()就是获取选中图标的值。并且data: $(data.form).serialize()改成data:data.field，这一点很重要，不过目前我不知道有啥区别。如下：

//监听提交
 form.on('submit(add)', function(data){
      data.field['icon']=$('#icon').text();
       $.ajax({
       url: data.form.action,
       type: data.form.method,
       //data: $(data.form).serialize(),
         data:data.field,
         success:function(){
            layer.alert("增加成功", {icon: 6},function () {
             // 获得frame索引
              var index = parent.layer.getFrameIndex(window.name);
               //关闭当前frame
                 parent.layer.close(index);
                         window.parent.location.reload();
                   });
                }
           });
           
            return false;
          });

刚开始我把图标的值赋给input框，和表单一块提交，下图注释的部分：

<div class="layui-input-inline">
    <div style="margin-left: 20px; margin-top: 5px">
	<ul>
	    <li style="display: inline-block; width: 50px;" id="menu-icon">
                <i class="layui-icon" id="icon" style="font-size: 25px;"   th:text="${module.icon}">
                </i>
            </li>
	    <li style="display: inline-block;">
                <i class="layui-btn layui-btn-primary layui-btn-sm" id="select_icon">                选择图标</i>
            </li>
	</ul>
    </div>
<!-- <div style="dmargin-left: 20px; margin-top: 5px;display: none;">
	<ul>
	    <li style="display: inline-block; width: 50px;" id="menu-icon2">
                <input id="icon2" name="icon">
            </li>
	</ul>
    </div> -->
</div>

上面这种提交到后台数据是个类似的字符串能看到，改过之后提交后台和保存到数据库都看不到数据，像个长空字符串，像下面这样：

看上面蓝色的部分，能选中说明确实是有数据的，控制台打印的也是这种情况，应该是编码的问题吧？！

最后：

       在网上没找到答案，自己试了好久，第一次用thmeleaf（感觉和这个有关系，freemark就没这些事），具体原因没找到，功能算是实现了。麻烦知道原因的朋友请告诉我一声~