font-awesome의 목록 아이콘으로 목록 축소

Question

Bootstrap/jQuery 및 fontawesome을 사용하여 정렬되지 않은 목록의 일부를 축소하려고합니다. 지금은 의미 론적으로 유효하다고 생각하는리스트를 중첩시키고 있습니다.

<ul>에 .collapse 클래스를 추가하면 내가 글 머리표로 설정 한 아이콘이 사라지는 것으로 보입니다. 내가 잘못된 것을하고 있습니까, 아니면 이것이 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> 

나는 글꼴 멋진 버그 신고를 준비했지만, 문서 중첩의 참조를하지 않기 때문에 .icons-ul 클래스를 사용하여 목록을 작성하면 잘못된 방법으로 이동하는지 확신 할 수 없습니다.

Answer 1

부트 스트랩의 .collpase과 FontAwesome의 .icons-ul은 잘 어울리지 않는 것 같습니다. 추가 검사가 필요하지만 문제는 부트 스트랩의 .collapse이 overflow: hidden을 사용하고 fontawesome의 .icon-li이 position: absolute; left: -2.142857142857143em;을 사용하는 것으로 보이므로 아이콘의 가시성이 차단됩니다.

어쨌든 여기에있는 작업을 수행하는 것으로 생각되는 코드가 수정되었습니다. 아이콘이 <a> 태그 내에되도록 HTML에서, 나는 소스를 변경 한 것을

는

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

참고; 메뉴를 실행하기 위해 아이콘을 클릭 할 수 없기 때문에 유용성 관점에서 견해를 찾고있었습니다.

HTML

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

a i { 
    color: #333; 
} 

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

또는

<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, 당신은 단지 .icon-li 클래스를 사용할 수 없었다.
http://jsbin.com/ofeziq/1/edit