添加图标到 wordpress 菜单

Question

I have some problems with Wordpress.. I tried to add icons from Wordpress -> Appearance -> Menu and it works but they are not clickable. I also want to remove the text from the menu icon and add it to "data-tooltip". And the last question is: How to add the menu item icons in a different element (not the "li" element) for example "span"?

My code should be:

<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>

But it actually looks like:

<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>

I hope you can help me: :)

Answer 1

Add icons : easiest way is to add icons via CSS. You can to add class for each link in admin and to add icon as pseudo-element, for example if your icon is image:

.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;
}

If your icon is font-family - you can add it in 'content' CSS rule.

Add tooltip and remove text : you can do it with jquery:

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