如何在输入字段中插入日历Web字体图标？
HTML：
<input class="start_date" type="text">
CSS：
.start_date:before {
font-family: "FontAwesome";
content: "\f073";
}
解决方法
<输入>是一个自动关闭的标签,你
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>
