Question

我在wordpress中创建自定义菜单，需要在菜单中的每个列表项上方放置fontawesome图标。在使用wordpress之前，我使用以下代码实现了这一点：

<ul>
  <li>
    <a href="#">
      <i class="fa fa-home"></i><br />
      Home
    </a>
  </li>

  <li>
     <a href="#">
       <i class="fa fa-cogs"></i><br />
       How it works
     </a>
  </li>

  <li>
    <a href="#">
      <i class="fa fa-question-circle"></i><br />
      Why use us?
    </a>
  </li>
</ul>

任何人都知道如何使用wordpress中的菜单编辑器执行此操作？

Answer 1

您可以在functions.php文件中创建自定义Walker_Nav_Menu。它看起来像这样（using this as a reference for where to start）：

class Icon_Walker extend Walker_Nav_Menu {
  function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
  {
    // Check the reference file for most of this

    // This is the class you set in the menu page.
    // Alternatively, you could use the any of the other inputs from the menu page
    $icon_class = $item->classes;

    //This goes before https://core.trac.wordpress.org/browser/tags/3.8.1/src//wp-includes/nav-menu-template.php#L151
    $item_output .= '<i class="' . $icon_class . '"></i><br>';
    // basically copy the rest of the reference method
  }
}

然后，您在其中包含菜单：

wp_nav_menu(array( 'walker' => new Icon_Walker ));

希望有所帮助。

Answer 2

老问题，但我最近不得不弄清楚如何在动态WP菜单中使用另一个图标字体，虽然这里的另一个答案是一个很好的解决方案，但对于非php精明的实现来说可能太复杂了。

您仍然可以使用class="fa fa-[icon_name]"原始示例的变体。

当您在/wp-admin/nav-menus.php中创建/编辑菜单时，默认情况下会在“屏幕选项”选项卡下隐藏向菜单项添加类的选项。（＆＃34;显示高级菜单属性＆＃34;＆gt;＆＃34; CSS类＆＃34;。）

启用高级选项后，您可以将fa fa-[icon_name]类添加到每个菜单项<li>和您的图标字体中：在伪选择开始之前因为您已经安装了图标字体并添加了正确的CSS（使用主题用于自定义字体使用的任何程序）。

注意：您需要指定wordpress在<li>中生成的锚点的样式，以使用您的普通文本字体样式，以及执行一些其他样式更新以获取图标和文本妥协。

最后，如果您希望图标可以点击（这可能与您在示例中嵌套在锚点技术中使用的<i>元素一起使用，则可以更新要用于的图标字体CSS使用.fa-[icon_name] a:before。

添加字体真棒图标上面的Wordpress自定义菜单项

2 个答案: