摺疊列表中的圖標從字體 - 真棒

Question

我試圖使用Bootstrap/jQuery和fontawesome摺疊一部分無序列表。現在我在嵌套列表，我認爲這在語義上是有效的。

看來，當我將.collapse類添加到<ul>時，我已設置爲項目符號的圖標消失。我做錯了什麼，或者這可能是fontawesome/Bootstrap之間的一個奇怪的衝突？

這是代碼，這裏是一個jsfiddle能說明問題：

<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> 

我已經準備好文件，字體真棒bug報告，但是由於文檔沒有做出任何嵌套參考使用.icons-ul類的列表，我不確定我是否以錯誤的方式處理事情。

Answer 1

Bootstrap的.collpase和FontAwesome的.icons-ul似乎並沒有很好地結合在一起。 進一步檢查是必要的，但問題似乎是引導的.collapse如何使用overflow: hidden和fontawesome的.icon-li使用position: absolute; left: -2.142857142857143em;，這意味着圖標的知名度將得到切斷。

無論如何，這是對您的代碼的修改，我相信完成了手頭的任務。

http://jsbin.com/ifequd/1/edit

注意，在HTML中，我已經改變了源，因此圖標是<a>標籤內;因爲我無法點擊圖標來觸發菜單，所以我從可用性的角度來看是瘋了。

HTML

<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> 

CSS

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

a i { 
    color: #333; 
} 

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

或者，你可以只不能使用的.icon-li類。
http://jsbin.com/ofeziq/1/edit