输入内的可点击字体真棒图标答案

【问题标题】：Clickable Font Awesome Icon inside Input输入内的可点击字体真棒图标
【发布时间】：2016-10-04 12:42:13
【问题描述】：

我目前有一个字体很棒的图标，位于输入字段上方。我希望该图标是可点击的，但我似乎无法让它工作。我已经将它包裹在一个跨度中，并更改了跨度光标，但它似乎没有任何效果。

代码如下：

.inner-addon {
  position: relative;
}
.inner-addon .fa {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}
.left-addon .fa {
  left: 0px;
}
.right-addon .fa {
  right: 0px;
}
.left-addon input {
  padding-left: 30px;
}
.right-addon input {
  padding-right: 30px;
}
#locationClickableIcon {
  cursor: pointer;
}

 <span id="locationClickableIcon"><i class="fa fa-crosshairs" id='autolocate'></i></span>
<input type="text" id="address" placeholder="Zipcode" value="" />

【问题讨论】：

点击效果很好 (jsfiddle.net/o2vg3men/1)。点击后您究竟希望发生什么？
对我来说，图标位于输入框内 - 它变得不可点击。
@JakeOls 你没有显示它真正失败的地方。我们如何在不重现问题的情况下提供帮助？
那么您的问题中一定缺少一些相关代码。 .inner-addon、.left-addon、.right-addon 在哪里？

标签： html css icons font-awesome

【解决方案1】：

它没有任何效果，因为您没有要求它在点击时做任何事情。这可以按照您的要求工作。如果您希望它的行为类似于链接，请将 <span> 更改为 <a> 并提供点击处理程序。

点击处理程序

$(function () {
  $("#locationClickableIcon").click(function () {
    alert("You clicked me!");
  });
});

.inner-addon {
  position: relative;
}

.inner-addon .fa {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

.left-addon .fa  { left:  0px;}
.right-addon .fa { right: 0px;}

.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }
#locationClickableIcon {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<span id="locationClickableIcon"><i class="fa fa-crosshairs" id='autolocate'></i></span>
<input type="text" id="address" placeholder="Zipcode" value="" />

链接

.inner-addon {
  position: relative;
}

.inner-addon .fa {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

.left-addon .fa  { left:  0px;}
.right-addon .fa { right: 0px;}

.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }
#locationClickableIcon {
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<a id="locationClickableIcon" href="http://example.com/"><i class="fa fa-crosshairs" id='autolocate'></i></a>
<input type="text" id="address" placeholder="Zipcode" value="" />

【讨论】：

谢谢 - 我添加了点击处理程序，但它仍然不可点击/指针没有改变。当我更改 CSS 以将图标移出输入时，它可以工作，只是在它位于输入上方时不起作用。
@JakeOls 它对我来说很好用。检查sn-p。确切的问题是什么？还是我无法理解您的问题？
你发的sn-p的图标在输入框外，而我的图标在框内。
@JakeOls 那么你能建立一个minimal reproducible example 并显示问题吗？