点击Font Awesome图标无法触发链接跳转如何解决

问题原因 #

当前代码存在两个直接导致跳转失效的问题：

• 标签嵌套逻辑错误：<a>链接标签被错误嵌套在<i>图标标签内部
• 链接无有效点击范围：<a>标签内部没有任何实际内容，默认渲染宽高为0，点击时无法命中可交互区域

修复方案 #

调换两个标签的嵌套顺序，将图标标签<i>放到<a>标签内部，让图标本身成为链接的可点击内容，修复后的代码参考：

<ul>
  <li>
    <a href="你的目标页面地址">
      <i class="fa-brands fa-github"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa-brands fa-whatsapp"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa-solid fa-envelope"></i>
    </a>
  </li>
</ul>

可选优化 #

如果需要提升点击体验（尤其是移动端场景），可以给图标链接添加基础样式扩大点击热区：

/* 给图标链接添加对应类名即可生效 */
.icon-link {
  display: inline-block;
  padding: 0.5rem;
}

内容的提问来源于stack exchange，提问作者Anannya Onu