锚标签内的字体真棒图标不可点击。有没有办法做到这一点？

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="#gotocontentdown">
    <i class="fa fa-angle-down fa-5x" aria-hidden="true"></i>
</a>

Answer 2

我的可点击格式如下：

<a href="https://stackoverflow.com">
  <span title="Edit">
    <i class="fa fa-pencil" aria-hidden="true"></i>
  </span>
</a>