文本输入元素中的Font Awesome图标

文本输入元素中的Font Awesome图标

你是对的。：before和：after伪内容不适用于替换的内容（如

img

和

input

元素）。与使用背景图像一样，添加包装元素并声明字体系列是一种可能。或者，也许html5占位符文本符合您的需求：

<input name="username" placeholder="&#61447;">

不支持占位符属性的浏览器将直接忽略它。

更新

before内容选择器选择输入：

input[type="text"]:before

。您应该选择包装器：

.wrapper:before

。我还添加了占位符建议，其中包装是多余的。

.wrapper input[type="text"] {    position: relative; }input { font-family: 'FontAwesome'; } .wrapper:before {    font-family: 'FontAwesome';    color:red;    position: relative;    left: -5px;    content: "f007";}<p ><input placeholder="&#61447; Username"></p>

倒退

Font
Awesome使用Unipre专用区（PUA）来存储图标。其他字符不存在，并退回到浏览器默认值。这应该与任何其他输入相同。如果在输入元素上定义字体，则在我们使用图标的情况下，提供与后备字体相同的字体。像这样：

input { font-family: 'FontAwesome', YourFont; }