你是对的。：before和：after伪内容不适用于替换的内容（如
img和
input元素）。与使用背景图像一样，添加包装元素并声明字体系列是一种可能。或者，也许html5占位符文本符合您的需求：
<input name="username" placeholder="">
不支持占位符属性的浏览器将直接忽略它。
更新
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=" Username"></p>倒退
Font
Awesome使用Unipre专用区（PUA）来存储图标。其他字符不存在，并退回到浏览器默认值。这应该与任何其他输入相同。如果在输入元素上定义字体，则在我们使用图标的情况下，提供与后备字体相同的字体。像这样：
input { font-family: 'FontAwesome', YourFont; }
