Bootstrap glyphicon图像位于文本上方（使用Jquery）

Question

我正在使用jquery动态创建一个glyphicons导航栏，但由于某些原因，glyphicons图像出现在侧面。我将导航栏添加到div中，如下所示：

$('#divID').append('<div id="buttonList">'+
   '<div id="buttonContainer" class="container">'+
         '<div>'+
            '<ul class="navbar-nav navbar-left" id="buttonsGoHere">'+
                 '<li><button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-trash"></span> ('+ divName +')</button></li>'+
             '</ul>'+
          '</div>'+
    '</div>'+
 '</div>');

出现字形，但垃圾图标位于文本的正上方（即（divName））。我在这里错过了什么来解决这个问题？

编辑：

css信息 - 我将这些导航栏附加到div，这里是div和buttonlist css。

#divID {
  position: absolute;
  height: 40%;
}

#buttonlist {
   position: absolute;
   top: 10px;
   left: 1px;  
   width: 4%;
}