文本输入元素内的字体真棒图标

Question

我试图在用户名输入字段中插入用户图标.

我已经尝试过类似问题的解决方案之一,background-image因为Font Awesome是一种字体,因此 知道属性不起作用.

以下是我的方法,我无法显示图标.

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

我在默认字体awesome css中声明了字体,所以我不确定上面添加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');
 }

Answer 1

输出:

HTML:

<input name="txtName" id="txtName">

<span class="fa fa-info-circle errspan"></span>

CSS:

<style type="text/css">
    .errspan {
        float: right;
        margin-right: 6px;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        color: red;
    }
</style>

(要么)

输出:

HTML:

<div class="input-wrapper">
     <input type="text" />
 </div>

CSS:

<style type="text/css">
    .input-wrapper {
        display:inline-block;
        position: relative
    }
    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: '\f274';
        position: absolute;
        right: 6px;
    }
</style>

Answer 2

你是对的.:before和:after伪内容不适用于替换内容img和input元素.添加包装元素并声明字体系列是其中一种可能性,就像使用背景图像一样.或者html5占位符文本可能符合您的需求:

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

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

UPDATE

before内容选择器选择输入: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="&#61447; Username"></p>

倒退

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

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

Answer 3

你可以使用包装器.在包装器中,添加字体awesome元素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; }

(这是一个黑客,我知道,但它完成了工作.)

Answer 4

如果您需要满足以下条件,则此答案将适用于您(当前答案均未满足这些条件):

1. 图标位于文本框内
2. 将文本输入输入时,图标不应消失,输入的文本将显示在图标的右侧
3. 单击该图标应使基础输入成为焦点

我相信3是满足这些条件的最小HTML元素数:

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>

Answer 5

无需编写很多代码......只需按照以下步骤操作:

<input id="input_search" type="text" class="fa" placeholder="&#xf002 Search">

你可以在这里找到Unicode(fontawesome)的链接......

FontAwesome用于图标的Unicode

Answer 6

我找到了使用 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>

Answer 7

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>

Answer 8

阅读了这个问题的各种版本并四处搜索,我想出了一个非常干净,无js的解决方案.它与@allcaps解决方案类似,但避免了输入字体从主文档字体更改的问题.

使用该::input-placeholder属性专门设置占位符文本的样式.这允许您使用图标字体作为占位符字体,将您的正文(或其他字体)用作实际输入文本.目前,您需要指定特定于供应商的选择器.

只要您不需要输入元素中的图标和文本组合,这就可以正常工作.如果你这样做,你需要忍受占位符文本作为默认浏览器字体(我的普通衬线)用于单词.

例如
HTML

<p class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</p>

CSS

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon::-webkit-input-placeholder {
    font-family:'FontAwesome';
}

浏览器前缀选择器:http://jsfiddle.net/gA4rx/78/

请注意,您需要将每个特定于浏览器的选择器定义为单独的规则.如果将它们组合在一起,浏览器将忽略它.