如何在wordpress中添加font-awesome图标wp_nav_menu（）

时间：2014-09-10 12:59:39

标签： wordpress

nav menu image

我正在尝试使用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如何在静态菜单中添加活动类，点击一个，这样就表明这是你现在的位置。

3 个答案:

答案 0 :(得分：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>

使用自定义代码添加活动类。

答案 1 :(得分：1)

This process is simple nowadays.

Goto your wordpress dashboard then select appearance->editor and select your theme header.php file.

add this line in the header section: 

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

after adding the above line go to appearance->menu then add the Fa Icon codes beside you menu items

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

hope this help

答案 2 :(得分：0)

假设您正在使用上面的标记，您只需更改icon-key icon-large类以反映FontAwesome的类。

例如，'home'图标，用房子表示。因此，只需将icon-home icon-large替换为fa fa-home。

可以使用FontAwesome图标列表here，点击一下查看它的类。

如果您想使用动态菜单，那么wp_nav_menu可能不适合您。您可能会发现使用wp_get_nav_menu_items构建自己的内容更容易。关于如何做到这一点的链接有一个很好的例子。

相关问题
最新问题