layui如何给表头添加图标？

项目需求：在表头中添加图标，用于提示用户信息

先上效果图：

实现的核心代码：

let cols=[[ 
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名<i id="hint" class="layui-icon layui-icon-about"></i>', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]],

table.render({
    cols:cols,
    done(){
         let tips_index=0
         $('#hint').mouseover(function(){
            tips_index=layer.tips('需要提示的文字','#hint',{
            tips:1
           })
         })

        $('#hint').mouseout(function(){
          layer.close(tips_index)
        })
    }
})