無圖像Bootstrap目錄樹 - 字體真棒圖標不變

Question

我正在使用bootstrap創建無圖像目錄樹，到目前爲止我已設法做到這樣的事情。但字體真棒圖標沒有顯示出來。 REF：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/

在ABO例如，字體真棒圖標不渲染。

感謝您的時間。

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'); 

這是的addClass & removeClass功能的力量：你可以移除元素只是一個單一的類名，即使有可能是10其他類。

在你的代碼中，根本不需要添加/刪除類fa，所以你可以刪除/添加fa-*類，它應該工作。

或者，您可以顛倒順序，它會工作。