如何在文本输入中插入字体真棒图标？ [英] How to insert font awesome icon into text input?

问题描述

如何在输入字段中插入日历网络字体图标？

How can I insert a calendar web font icon into my input field?

HTML：

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

CSS：

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

推荐答案

< input> 是一个自动关闭的标签，您不能具有任何<$ c $其中的c>：before 或：after 伪元素。您可以将其包装到< label> 或< span> 中，然后将其附加到那里。

<input> is a self-closing tag, you cannot have any :before or :after pseudo element in it. You could wrap it into a <label> or <span> so and attach it there.

.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>

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

Here is an example of having the icon positioned inside the input field.

.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>

这篇关于如何在文本输入中插入字体真棒图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！