my icons are not redirecting to the right page-CodePudding

for some reason when I click on the icon it doesn't redirect to the right page

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" 
  integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
  <a href="https://www.researchgate.net/"><i  style="font-size:28px; color:#04d7aa; position: absolute; bottom: 0; left: 0; padding-left: 207px; padding-bottom: 11px;"></i></a>
  <a href="https://www.youtube.com/"><i  style="font-size:30px; color:red; position: absolute; bottom: 0; left: 0; padding-left: 240px; padding-bottom: 10px;"></i></a>
  <a href="https://www.facebook.com/"><i  style="font-size:25px; color:#2c61a0; position: absolute; bottom: 0; left: 0; padding-left: 280px; padding-bottom: 13px;"></i></a>

CodePudding user response：

It's because you're using position:absolute in your icons. That means they are moved outside the corresponding link.

You need to position the anchor tags instead:

<a href="https://www.researchgate.net/" style="font-size:28px; color:#04d7aa; position: absolute; bottom: 11px; left: 207px;"><i ></i></a>
<a href="https://www.youtube.com/" style="font-size:30px; color:red; position: absolute; bottom: 10px; left: 240px;"><i ></i></a>
<a href="https://www.facebook.com/" style="font-size:25px; color:#2c61a0; position: absolute; bottom: 13px; left: 280px;"><i ></i></a>

You're positioning them all on top of each other with bottom: 0; left: 0.

The last anchor will be on top. That means it will only go to www.facebook.com when trying to click the others (the Facebook link has 280px of padding to its left, which is still part of its clickable area, obscuring the icons behind it).

You should use the absolute positioning, rather than setting those values to 0.