HTML hyperlinks not working

Question

     <div class="item slides">
      <div class="slide-12"></div>       
      <div class="hero3">  
          <h1>Reach out at</h1>      
          <a href="https://www.linkedin.com/in/sowmiya-nagarajan/" 
          class="fa fa-linkedin"></a>
          <a href="https://github.com/strangest-quark" class="fa fa-
          github"></a>
          <a href="https://www.snapchat.com/add/strangely-quark" 
          class="fa fa-snapchat-ghost"></a>
          <a href="https://www.facebook.com/nagarajan.sowmiya" 
          class="fa fa-facebook"></a>
          <a href="https://www.instagram.com/strange._.quark/" 
          class="fa fa-instagram"></a>
      </div>    
    </div>

The hyperlinks in the above code snippet are not clickable. It could be a problem of another overlapping div. The links work when I use tab.

I tried z-index in different combinations, but none of them seem to work!

Find the complete html and css file in the following links:

1. CSS
2. HTML

Any help appreciated.

Answer 1

I added some text inside the anchor tags. But it seems you are needing to show them just as Font Awesome icons. In that case a single space character will be enough. Or well a  

  <div class="hero3">  
      <h1>Reach out at</h1>      
      <a href="https://www.linkedin.com/in/sowmiya-nagarajan/" 
      class="fa fa-linkedin"> sowmiya-nagarajan</a>
      <a href="https://github.com/strangest-quark" class="fa fa-
      github"> strangest-quark</a>
      <a href="https://www.snapchat.com/add/strangely-quark" 
      class="fa fa-snapchat-ghost"> strangely-quark</a>
      <a href="https://www.facebook.com/nagarajan.sowmiya" 
      class="fa fa-facebook">&nbsp;</a>
      <a href="https://www.instagram.com/strange._.quark/" 
      class="fa fa-instagram"> </a>
  </div>    

Answer 2

The links have no content inside them. What you can do if you want icon only links is to put the fa-* classes on a span or i tag inside the a tag like so:

<a href="https://example.com" >
    <span class="fa fa-linkedin"></span>
</a>

This then causes the a tag to actually have content and be clickable.