Font Awesome的fab fa-whatsapp图标移动端可显示但无法点击问题咨询

问题原因 #

• position: fixed定位属性写在<i>图标标签上，导致图标脱离父级<a>链接的文档流，父级<a>本身没有占据和图标匹配的可点击区域，移动端触摸事件无法正确识别链接的点击触发范围
• 未设置明确层级，图标可能被页面其他底层元素遮挡，拦截触摸事件
• 电话号码未带国际区号，部分移动端WhatsApp客户端识别号码时可能出现异常

修复方案 #

代码调整参考 #

把定位、层级样式迁移到<a>标签上，同时给链接设置足够的点击热区，修改后代码如下：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

<div class="row">
  <div class="col">
    <a href="https://api.whatsapp.com/send?phone=+234701066555" style="position:fixed;bottom:0;right:0;z-index:999;display:block;width:60px;height:60px;line-height:60px;text-align:center;">
      <i class="fab fa-whatsapp fa-5x" style="color:green;"></i>
    </a>
  </div>
</div>

其他注意点 #

• 电话号码请替换为对应国家区号的正确格式，去掉号码开头的0，避免WhatsApp识别错误
• 若页面有其他固定定位元素，可适当调高z-index值，确保WhatsApp图标在最上层

内容的提问来源于stack exchange，提问作者Abdelouahad Elfihri