images-less Bootstrap Directory Tree - font-awesome значки не меняются

Question

Я создаю дерево каталогов без изображения, используя bootstrap, до сих пор мне удалось сделать что-то вроде этого. но шрифт awesome icons не отображается. ссылка: https://github.com/jhfrench/bootstrap-tree

HTML

<div class="tree"> 
    <ul> 
     <li><span><i class="fa fa-folder-open-o"></i> Parent</span> <a href="">Goes somewhere</a> 
      <ul> 
       <li><span><i class="fa fa-minus-square-o"></i> Child</span> <a href="">Goes somewhere</a> 
       <ul> 
       <li><span><i class="fa fa-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a> 
       </li> 
       </ul> 
       </li> 

       <li><span><i class="fa fa-minus-square-o"></i> Child</span> <a href="">Goes somewhere</a> 
        <ul> 
         <li><span><i class="fa fa-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a> 
         </li> 

         <li><span><i class="fa fa-minus-square-o"></i> Grand Child</span> <a href="">Goes somewhere</a> 
          <ul> 
           <li><span><i class="fa fa-minus-square-o"></i> Great Grand Child</span> <a href="">Goes somewhere</a> 
           <ul> 
           <li><span><i class="fa fa-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a> 
           </li> 
           <li><span><i class="fa fa-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a> 
           </li> 
           </ul> 
           </li> 

           <li><span><i class="fa fa-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a> 
           </li> 

           <li><span><i class="fa fa-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a> 
           </li> 
          </ul> 
         </li> 

         <li><span><i class="fa fa-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 

     <li><span><i class="fa fa-folder-open-o"></i> Parent2</span> <a href="">Goes somewhere</a> 
      <ul> 
       <li><span><i class="fa fa-leaf"></i> Child</span> <a href="">Goes somewhere</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

CSS

@import url("http://netdna.bootstrapcdn.com/bootswatch/3.0.3/cerulean/bootstrap.min.css"); 
@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"); 
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"); 

.tree { 
    min-height:20px; 
    padding:0px; 
    margin-bottom:20px; 
} 

.tree li { 
    list-style-type:none; 
    margin:0; 
    padding:13px 0px 0px 0px; 
    position:relative 
} 
.tree li::before, .tree li::after { 
    content:''; 
    left:-20px; 
    position:absolute; 
    right:auto 
} 
.tree li::before { 
    border-left:1px solid #999; 
    bottom:50px; 
    height:100%; 
    top:0; 
    width:1px 
} 
.tree li::after { 
    border-top:1px solid #999; 
    height:20px; 
    top:25px; 
    width:25px 
} 
.tree li span { 

    display:inline-block; 
    padding:3px 8px; 
    text-decoration:none 
} 
.tree li.parent_li>span { 
    cursor:pointer 
} 
.tree>ul>li::before, .tree>ul>li::after { 
    border:0 
} 
.tree li:last-child::before { 
    height:25px 
} 
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span { 
    background:#eee; 
    border:1px solid #94a0b4; 
    color:#000 
} 

JAVASCRIPT

$(function() { 
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch'); 
    $('.tree li.parent_li > span').on('click', function (e) { 
     var children = $(this).parent('li.parent_li').find(' > ul > li'); 
     if (children.is(":visible")) { 
      children.hide('fast'); 
      $(this).attr('title', 'Expand this branch').find(' > i').addClass('fa fa-plus-square-o').removeClass('fa fa-minus-square-o'); 
     } else { 
      children.show('fast'); 
      $(this).attr('title', 'Collapse this branch').find(' > i').addClass('fa fa-minus-square-o').removeClass('fa fa-plus-square-o'); 
     } 
     e.stopPropagation(); 
    }); 
}); 

http://jsfiddle.net/GpdgF/990/

В Або Например, шрифт awesome icons не отображается.

спасибо за ваше время.

Answer 1

Проблема заключается в том:

addClass('fa fa-plus-square-o').removeClass('fa fa-minus-square-o'); 

addClass & removeClass принимает аргумент является список классов, разделенных пробелами, он сначала удалить классы fa & fa-plus-square-o, а затем добавить класс fa & fa-plus-square-o. Было бы так же, как вызов addClass & removeClass дважды, как в:

$('.select') 
    .addClass('fa') 
    .addClass('fa-plus-square-o') 
    .removeClass('fa') 
    .removeClass('fa-minus-square-o'); 

Это сила функций removeClass addClass &: можно удалить только одно имя класса из элемента, хотя там может быть 10 другие классы.

В вашем коде вам не нужно добавлять/удалять класс fa, так что вы можете просто удалить/добавить класс fa-*, и он должен работать.

Кроме того, вы можете отменить заказ, и он будет работать.