CODEWITHSUNDEEP
javascriptfont-awesome
Ken Thomas
Ken Thomas

Reputation: 41

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

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>

Upvotes: 4

Views: 9833

Answers (2)

MAK
MAK

Reputation: 31

Following format works fine for me:

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

Upvotes: 2

Mark Rogers
Mark Rogers

Reputation: 73

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>

Upvotes: 0

Related Questions