如何在输入文本字段中添加超棒的字体?

时间:2018-07-09 16:37:24

标签: javascript font-awesome input-field

如何在输入元素的末尾添加很棒的字体图标?

<input id="someId" type="text" class="some-class" data-bind="textInput: myVariable">

里面有文字时,是否还可以保留图标?

我正在使用淘汰表。谢谢大家!

2 个答案:

答案 0 :(得分:1)

这是示例代码:

<div class="input-container">
  <input class="input-field" type="text" placeholder="Username" name="usrnm">
  <i class="fa fa-user icon"></i>
</div>

还有一个有效的jsfiddle链接:http://jsfiddle.net/newzy08/aq9Laaew/77753/

答案 1 :(得分:1)

您可以尝试使用Bootstrap或任何其他CSS库,例如语义UI,Materialize等。

在Bootstrap中,看起来可能像这样:

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <i class="fa fa-at"></i> <!-- Use of font awesome icon -->
      </div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>
</form>

要在输入字段的末尾添加图标:

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
    <div class="input-group-append">
      <div class="input-group-text">
        <i class="fa fa-at"></i>
      </div>
    </div>

  </div>
</form>

Codepen上查看示例