文本输入元素内的字体强大的图标
我正在尝试在用户名输入字段中插入用户图标。
在知道background-image属性不起作用的情况下，我尝试了similar question中的一种解决方案，因为Font Awesome是一种字体。
以下是我的方法，我无法获得图标显示。
.wrapper input[type="text"] {
position: relative;
}
.wrapper input[type="text"]:before {
font-family: 'FontAwesome';
position: absolute;
top: 0px;
left: -5px;
content: "\f007";
}我在默认的字体很棒的css中声明了font face，所以我不确定添加上面的font-family是否是正确的方法。
@font-face {
font-family: 'FontAwesome';
src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
}回答 18
Stack Overflow用户
发布于 2013-10-10 16:47:36
你是对的。:before和:after伪内容不适用于替换的内容，如img和input元素。添加一个包装元素并声明一个font-family是一种可能性，就像使用背景图像一样。或者使用html5占位符文本来满足您的需求：
<input name="username" placeholder="">不支持placeholder属性的浏览器将直接忽略它。
更新
之前的内容选择器选择输入：input[type="text"]:before。您应该选择包装器：.wrapper:before。参见http://jsfiddle.net/allcaps/gA4rx/。我还在包装器多余的地方添加了占位符建议。
.wrapper input[type="text"] {
position: relative;
}
input { font-family: 'FontAwesome'; } /* This is for the placeholder */
.wrapper:before {
font-family: 'FontAwesome';
color:red;
position: relative;
left: -5px;
content: "\f007";
} <p class="wrapper"><input placeholder=" Username"></p>
回退
Font Awesome使用Unicode专用区域(PUA)来存储图标。其他字符不存在，并回退到浏览器默认设置。这应该与任何其他输入相同。如果您在输入元素上定义了字体，则在我们使用图标情况下，应提供与备用字体相同的字体。如下所示：
input { font-family: 'FontAwesome', YourFont; }Stack Overflow用户
发布于 2014-09-24 20:18:41
您可以使用包装器。在包装器中，添加font and元素i和input元素。
<div class="wrapper">
<i class="fa fa-icon"></i>
<input type="button">
</div>然后将包装器的位置设置为relative：
.wrapper { position: relative; }然后将i元素的位置设置为绝对位置，并为其设置正确的位置：
i.fa-icon { position: absolute; top: 10px; left: 50px; }(我知道这是一种黑客手段，但它可以完成工作。)
Stack Overflow用户
发布于 2018-04-15 19:46:46
我找到了使用bootstrap 4的最简单的方法。
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span></div>
<input type="text"/>
</div>https://stackoverflow.com/questions/19285640
复制相似问题