将图标添加到 wordpress 菜单

Question

我在使用 Wordpress 时遇到了一些问题。我尝试从 Wordpress -> 外观 -> 菜单添加图标，它可以工作，但它们不可点击。我还想从菜单图标中删除文本并将其添加到“数据工具提示”中。最后一个问题是：如何在不同的元素（不是“li”元素）中添加菜单项图标，例如“span”？

我的代码应该是：

<ul class="clear-list">
   <li>
      <a href="index.php" data-tooltip="Home"><span class="crt-icon crt-icon-home"></span></a>
   </li>
   <li>
      <a href="portfolio.php" data-tooltip="Portfolio"><span class="crt-icon crt-icon-portfolio"></span></a>
   </li>
   <li>
      <a href="testimonials.php" data-tooltip="Testimonials"><span class="crt-icon crt-icon-references"></span></a>
   </li>
   <li>
      <a href="contact.php" data-tooltip="Contact"><span class="crt-icon crt-icon-contact"></span></a>
   </li>
</ul>

但它实际上看起来像：

<ul id="menu-main-menu" class="clear-list">
   <li id="menu-item-60" class="crt-icon crt-icon-home menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-7 current_page_item menu-item-60"><a href="......." aria-current="page">Home</a>
   </li>
   <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href=".........">Experience</a>
   </li>
   <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href=".......">Portfolio</a>
   </li>
   <li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a href=".........">Testimonials</a>
   </li>
   <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href=".........">Contacts</a>
   </li>
</ul>

我希望你能帮助我！ :)

Answer 1

添加图标：最简单的方法是通过 CSS 添加图标。 您可以在 admin 中为每个链接添加类并将图标添加为伪元素，例如，如果您的图标是图像：

.crt-icon a:after {
  background: url(https://www.iconfinder.com/data/icons/ionicons/512/icon-ios7-contact-512.png);
  background-size: cover;
  content: '';
  display: block;
  height: 15px;
  width: 15px;
}

如果您的图标是字体系列 - 您可以将其添加到“内容”CSS 规则中。

添加工具提示并删除文本：您可以使用 jquery 来完成：

$( '#menu-main-menu a' ).each( function () {
  $( this ).attr( 'data-tooltip', $( this ).text() ).empty();
})