Font awesome icons within anchor tags not clickable. Is there a way to do it?

Question

I can't seem to make my font awesome icons clickable. Placing them inside anchor tags was the most popular response to others who have had this problem but its not working for me. If i click the background within the anchor tags and around the icon, it shows the dropdown menu i want, but if i click on the actual icon the dropdown won't open. As you can imagine this is a pain on mobile when most will be trying to click the icon. Help please!

<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

Following format works fine for me:

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

Answer 2

mine are clickable with the following format:

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