jquery - Collapsing a list with list icons from font-awesome -

I am trying to shorten a portion of an unordered list using bootstrap / jQuery and fontosmos. Right now I am in the nesting lists, which I think is semantically valid.

It seems that when I & lt; Ul & gt; For . Set up after bullets disappear. Am I doing something wrong, or can it be somewhat contradictory between the fontoscope / bootstrap?

This is the code, and here the problem is described:

    
 I was ready to enter a bug report with font-awesome, but because the documentation is not making any reference to nested lists using the .in-ul class, then I I'm sure if I'm going wrong about things.   
 
 
 Bootstrap  .collpase  and FontAwesome's  .icons-ul < / Code> do not seem to play well together. Apart from this, inspection is necessary, but this issue appears that the  of Bootstrap Collax uses  overflow: hidden , and fontawesome's  .inon-li   status: complete; Left: -2.142857142857143em; , which means that the visibility of the icon will be deducted.  
 Anyway, there is a modification of your code which I believe is that it completes the work in hand.  
  
 Note that in html, I changed the source so that the icon  & lt; A & gt;  inside the tag; I was going crazy with an applicability perspective because I could not click on the icon to trigger the menu.  
  HTML     & lt; Ul class = "icons-ul" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; I class = "icon-li icon-cog" & gt; & Lt; / I & gt; List item & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# list-more" class = "accordion-toggle" data-toggle = "collapse" data-target = "# list-more" & gt; & Lt; I class = "icon-li icon-chevron-down" & gt; & Lt; / I & gt; More & lt; / A & gt; & Lt; Ul id = "list-more" square = "sign-ul collapse" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; I class = "icon-li icon-cog" & gt; & Lt; / I & gt; Item 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; I class = "icon-li icon-cog" & gt; & Lt; / I & gt; Item 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt;   
  CSS   
  ul.collapse {left: -2.142857142857143em; }. Colepes Li (left: 2.142857142857143em; } An i {color: # 333; } A: Hover i {text-decoration: none; }   
 Alternatively, you can not just  use  to  .inon-li  class.