锚标签内的字体真棒图标无法点击。有办法吗？

Question

我似乎无法使我的字体可怕的图标可点击。把它们放在锚标签内是对其他有这个问题但对我不起作用的人最流行的回应。如果我点击锚标签内和图标周围的背景，它会显示我想要的下拉菜单，但如果我点击实际图标，下拉列表将无法打开。你可以想象，当大多数人试图点击图标时，这对移动设备来说是一种痛苦。请帮忙！

<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="https://stackoverflow.com">
  <span title="Edit">
    <i class="fa fa-pencil" aria-hidden="true"></i>
  </span>
</a>