Javascript 锚定标记中的字体图标不可单击。有办法吗？

我似乎无法使我的字体图标可点击。将它们放在锚定标签中是对其他有此问题的人最流行的回应，但这对我来说并不管用。如果我单击锚定标记内的背景和图标周围，它会显示我想要的下拉菜单，但如果我单击实际图标，下拉菜单将不会打开。你可以想象，当大多数人试图点击图标时，这在手机上是一种痛苦。救命啊

<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>

函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'| |'.fa--pen square'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

我的可点击格式如下：

---

以下格式适合我：

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

可能就是你想要的。它可能是开始和结束；注意HTML（

fa-pen-square

）和JavaScript（

fa-pen-square

）中的类名之间的差异……可能应该使用泛型

.fa

类（是

.fas

打字错误吗？）。建议在锚点上添加目标属性。@isherwood

.fas

和

.far

都是新版本的字体。我想我应该澄清一下。链接到另一个页面或链接到外部站点都可以。但是我不能让它在点击时显示下拉菜单，只有在图标周围点击才会显示下拉菜单。你有没有得到任何解决方案？我也面临同样的问题，我可以在点击图标时导航到其他页面，但我打开弹出窗口的脚本在点击图标时不起作用，但当我点击图标周围的空白时，它就起作用了