将图标添加到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中的每个链接添加类，并可以将图标添加为伪元素，例如，如果您的图标是图片：

boto3==1.12.39
botocore==1.15.39
certifi==2020.6.20
chardet==3.0.4
Django==2.2
djangorestframework==3.11.0
docutils==0.15.2
gevent==20.5.1
greenlet==0.4.16
gunicorn==20.0.4
idna==2.9
jmespath==0.10.0
json-logging==1.2.0
numpy==1.19.0
pandas==1.0.5
python-dateutil==2.8.1
pytz==2020.1
requests==2.23.0
s3transfer==0.3.3
six==1.15.0
SQLAlchemy==1.3.16
sqlparse==0.3.1
urllib3==1.25.9
zope.event==4.4
zope.interface==5.1.0
pytest==6.0.1

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

添加工具提示并删除文本：您可以使用jquery进行操作：

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