Question

我想让Font Awesome图标与输入重叠。这是因为我希望按钮成为图标本身。

我的解决方案在Firefox和Chrome中运行良好，但在IE中不起作用。这意味着在IE中按钮不可点击，因为它发生了图标超过按钮。

这是HTML：

<span>
   <input type="button"/>
   <i class="fa fa-camera-retro"></i>
</span>

CSS：

span {
    position: relative;
}

input {
    position: relative;
    background: none;
    border: none;
    z-index: 2;
    cursor: pointer;
}

i {
    position: absolute;
    left: 0;
}

奇怪的是，这段代码在JSFiddle中运行良好。

更新：我必须使用输入。

Answer 1

如果您需要一个按钮（例如表格），您可以使用：

<button><i class="fa fa-camera-retro"></i></button>

或者，如果您绝对必须拥有输入元素按钮，请尝试使用指向输入的标签：

<span>
   <input id="myButton" type="button"/>
   <label for="myButton" class="fa fa-camera-retro"></label>
</span>

Answer 2

试试这个：<a href = "#"><i class="fa fa-camera-retro"></i></a>

使用链接而不是按钮可能会解决您的问题。

重叠fontawesome图标输入IE

2 个答案: