Jquery 从字体列表中折叠带有列表图标的列表

我试图使用Bootstrap/jQuery和fontsome折叠无序列表的一部分。现在我正在嵌套列表，我认为这在语义上是有效的

当我将.collapse类添加到

时，我设置为项目符号的图标似乎消失了。我是否做错了什么，或者这可能是Fontsome/Bootstrap之间的奇怪冲突

这是代码，下面是说明问题的示例：

<ul class="icons-ul">
    <li><i class="icon-li icon-cog"></i><a href="#">List item</a></li>
    <li><i class="icon-li icon-chevron-down"></i><a href="#list-more" class="accordion-toggle" data-toggle="collapse" data-target="#list-more">More</a>
        <ul id="list-more" class="icons-ul collapse">
            <li><i class="icon-li icon-cog"></i><a href="#">Item 1</a></li>
            <li><i class="icon-li icon-cog"></i><a href=#"">Item 2</a></li>
        </ul>
    </li>
</ul>

---

我准备用font awesome提交一份错误报告，但由于文档中没有使用.icons ul类引用嵌套列表，我不确定我是否走错了方向。

Bootstrap的

.collpase

和FontAwesome的

。图标ul

似乎不能很好地配合使用。 进一步的检查是必要的，但问题似乎是bootstrap的

.collapse

如何使用

overflow:hidden

，以及fontawesome的

。图标li

如何使用

位置：绝对；左：-2.142857142857143em，这意味着图标的可见性将被切断

无论如何，这里有一个对代码的修改，我相信它可以完成手头的任务


请注意，在html中，我更改了源代码，使图标位于
引导程序的
.collpase
和FontAwesome的
中。图标ul
似乎不能很好地配合使用。
进一步的检查是必要的，但问题似乎是bootstrap的
.collapse
如何使用
overflow:hidden
，以及fontawesome的
。图标li
如何使用
位置：绝对；左：-2.142857142857143em，这意味着图标的可见性将被切断

无论如何，这里有一个对代码的修改，我相信它可以完成手头的任务


请注意，在html中，我更改了源代码，使图标位于
中，感谢您的回复！从可用性的角度来看，我认为你是对的，因为图标是可点击的——我没有这样做是因为语义（一个项目符号应该是可点击的吗？），但我认为这样做更有意义。CSS包含如此奇怪的数字有什么原因吗？@Corey-谢谢你的回复！从可用性的角度来看，我认为你是对的，因为图标是可点击的——我没有这样做是因为语义（一个项目符号应该是可点击的吗？），但我认为这样做更有意义。CSS包含如此奇怪的数字有什么原因吗？@Corey-
<ul class="icons-ul">
    <li><a href="#"><i class="icon-li icon-cog"></i>List item</a></li>
    <li><a href="#list-more" class="accordion-toggle" data-toggle="collapse" data-target="#list-more"><i class="icon-li icon-chevron-down"></i>More</a>
        <ul id="list-more" class="icons-ul collapse">
            <li><a href="#"><i class="icon-li icon-cog"></i>Item 1</a></li>
            <li><a href="#"><i class="icon-li icon-cog"></i>Item 2</a></li>
        </ul>
    </li>
</ul>

ul.collapse {
  left: -2.142857142857143em;
}
.collapse li {
  left: 2.142857142857143em;
}

a i {
  color: #333;  
}

a:hover i {
  text-decoration: none;  
}