如何在WordPress wp_nav_menu（）

Question

我試圖表明使用wp_nav_menu在WordPress這個菜單（）添加字體真棒圖標;但由於知識少，我無法理解如何完成這項任務。 請幫助我，並請分享代碼，如果你有任何想法。

<div class="pull-left"> 
<nav> 
<ul class="sf-menu sf-js-enabled sf-shadow l_tinynav1" id="nav"> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>" class="first-level-link sf-with-ul"> 
        <div class="menu-icon"><i class="icon-home icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Home</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=4" class="first-level-link"> 
        <div class="menu-icon"><i class="icon-user icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">About Us</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=6" class="first-level-link"> 
        <div class="menu-icon"><i class="icon-cogs icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Services</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=8" class="first-level-link"> 
        <div class="menu-icon"><i class="icon-briefcase icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Projects</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=10" class="first-level-link"> 
        <div class="menu-icon"><i class="icon-key icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Careers</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=12" class="first-level-link"> 
        <div class="menu-icon"><i class="icon-comments icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">FAQ</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=14" class="first-level-link"> 
        <div class="menu-icon"><i class="icon-envelope-alt icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Contact</div> 
        </div> 
        </a> </li> 
       </ul> 
</nav> 
</div> 

現在我正在使用這個，但它的靜態和一件事我也面臨活動菜單問題。請與我分享代碼或telme我怎樣才能添加活動類在靜態菜單哪一個被點擊所以顯示這是你現在的位置。

Answer 1

<div class="pull-left"> 
       <nav> 
       <ul class="sf-menu sf-js-enabled sf-shadow l_tinynav1" id="nav"> 
        <?php echo $page_id = $post->ID; ?> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>" class="first-level-link <?php if(is_home()){ echo "active"; }?> sf-with-ul"> 
        <div class="menu-icon"><i class="icon-home icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Home</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=4" class="first-level-link <?php if($page_id==4){echo "active";}?> "> 
        <div class="menu-icon"><i class="icon-user icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">About Us</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=6" class="first-level-link <?php if($page_id==6){echo "active";}?>"> 
        <div class="menu-icon"><i class="icon-cogs icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Services</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=8" class="first-level-link <?php if($page_id==8){echo "active";}?>"> 
        <div class="menu-icon"><i class="icon-briefcase icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Projects</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=10" class="first-level-link <?php if($page_id==10){echo "active";}?>"> 
        <div class="menu-icon"><i class="icon-key icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Careers</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=12" class="first-level-link <?php if($page_id==12){echo "active";}?>"> 
        <div class="menu-icon"><i class="icon-comments icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">FAQ</div> 
        </div> 
        </a> </li> 
        <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=14" class="first-level-link <?php if($page_id==14){echo "active";}?>"> 
        <div class="menu-icon"><i class="icon-envelope-alt icon-large"></i></div> 
        <div class="menu-item-wrapper"> 
         <div class="first-level-li-text-link">Contact</div> 
        </div> 
        </a> </li> 
       </ul> 

       </nav> 
      </div> 

使用自定義代碼添加的活動類。

Answer 2

假設使用的是上面的標記，可以簡單地改變icon-key icon-large類來反映這些FontAwesome的。

例如，「家」圖標，其與一所房子表示。因此，只需將icon-home icon-large替換爲fa fa-home即可。

的FontAwesome圖標的列表中提供here，點擊一個看到它的類。

如果要使用動態菜單，然後wp_nav_menu可能是不適合你。您可能會發現使用wp_get_nav_menu_items更容易建立自己的帳戶。在這個鏈接上有一個很好的例子來說明如何去做。

Answer 3

這個過程現在很簡單。

轉到你的WordPress的儀表板，然後選擇appearance->編輯 並選擇你的主題header.php文件。

在標題中添加該行：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 

添加上述行之後去appearance->菜單然後添加菜單項

<i class="fa fa-home" aria-hidden="true"></i> 

希望這有助於旁邊的圖標法碼