如何在wordpress中添加font-awesome图标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

现在这个过程很简单。

转到wordpress仪表板，然后选择外观 - >编辑器并选择主题header.php文件。

在标题部分添加此行：

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

添加上述行后，转到外观 - >菜单，然后在菜单项旁边添加Fa图标代码

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

希望这个帮助

Answer 3

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

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

此处提供FontAwesome图标列表，单击其中一个以查看它的类。

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