字体真棒图标不可点击（反应）答案

【问题标题】：Font-awesome icon not clickable (React)字体真棒图标不可点击（反应）
【发布时间】：2020-11-30 23:53:41
【问题描述】：

我正在尝试使用社交媒体链接实现字体很棒的图标，但由于不确定的原因，图标不可点击且不响应转换。关于如何解决它的任何想法？

这里是codesandox中的项目： https://codesandbox.io/s/under-construction-7g68z

【问题讨论】：

【解决方案1】：

你可以给#outerCraneContainer 一个 z-index:-1

#outerCraneContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  box-shadow: inset 0 -60px 0 -30px #ff6347;
  z-index:-1; 
}

把它推到其他元素后面

【讨论】：

【解决方案2】：

问题在于您的#outerCraneContainer 样式，它们覆盖了整个页面（包括链接），这就是您无法点击任何链接的原因。

尝试将#outerCraneContainer 高度设置为height: 200px; 而不是100%。

【讨论】：

【解决方案3】：

你有div id outerCraneContainer，它显示在你的图标上，从而阻止它们被点击。

解决方法：将position: absolute;从app.css下删除

#outerCraneContainer {
  position: absolute; //remove this
  width: 100%;
  height: 100%;
  bottom: 0;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  box-shadow: inset 0 -60px 0 -30px #ff6347;
}

【讨论】：