如何将字体真棒图标插入文本输入？

Question

如何将日历 Web 字体图标插入我的输入字段？

HTML:

<input class="start_date" type="text">

CSS:

.start_date:before {
  font-family: "FontAwesome";
  content: "\f073";
}

Answer 1

<input> 是一个自闭合标签，您 cannot 中有任何 :before 或 :after 伪元素。您可以将其包装成 <label> 或 <span> 并附加到那里。

.start_date:before {
  font-family: "FontAwesome";
  content: "\f073";
}

.start_date:before,
.start_date input {
  vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<label class="start_date">
  <input type="text" placeholder="Date">
</label>

这是将图标放置在输入字段内的示例。

.start_date {
  position: relative;
}

.start_date:before {
  font-family: "FontAwesome";
  font-size: 14px;
  content: "\f073";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.start_date input {
  text-indent: 18px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<label class="start_date">
  <input type="text" placeholder="Date" />
</label>

如何将字体真棒图标插入文本输入？

How to insert font awesome icon into text input?

html

css

webfonts

font-awesome