如何将日历网络字体图标插入我的输入字段？
HTML:
<input class="start_date" type="text">
CSS:
.start_date:before {
font-family: "FontAwesome";
content: "\f073";
}
<input>是一个自闭标签，你cannot https://stackoverflow.com/a/2591460/1654265有什么:before or :after其中的伪元素。你可以将它包装成<label> or <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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
