javascript - anchor 标签内的 Font Awesome 图标不可点击。有没有办法做到这一点？

Question

我似乎无法让我的 Font Awesome 图标可点击。将它们放在 anchor 标签中是对遇到此问题但对我不起作用的其他人最流行的回应。如果我点击 anchor 标签内和图标周围的背景，它会显示我想要的下拉菜单，但如果我点击实际图标，下拉菜单将不会打开。正如您可以想象的那样，当大多数人试图点击图标时，这对移动设备来说是一种痛苦。请帮忙!

<div class="dropdown">
  <a onclick="myFunction()" class="dropbtn" href="#">  
    <i class="fas fa-pen-square"></i>  
    <h6 class="iconSub">News</h6>  
  </a>
  <div id="myDropdown" class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
  </div>
</div>

<script>
  function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
  }

  window.onclick = function(event) {
    if (!event.target.matches('.dropbtn' || '.fa--pen-square'))  {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }
</script>

Answer 1

以下格式对我来说很好:

<a href="#gotocontentdown">
    <i class="fa fa-angle-down fa-5x" aria-hidden="true"></i>
</a>