<分区>
如何将日历 Web 字体图标插入我的输入字段?
HTML:
<input class="start_date" type="text">
CSS:
.start_date:before {
font-family: "FontAwesome";
content: "\f073";
}
<分区>
如何将日历 Web 字体图标插入我的输入字段?
HTML:
<input class="start_date" type="text">
CSS:
.start_date:before {
font-family: "FontAwesome";
content: "\f073";
}
最佳答案
<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>
关于html - 如何将 Font Awesome 图标插入文本输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30858007/
相关文章:
javascript - 如何使用 html css js 生成随机大小的数组以对可视化器进行排序?
javascript - 如何从按钮增加 java 脚本函数中的全局变量?
javascript - 如何使用 Javascript 使用嵌套循环打印到外循环的输出中?
java - 如何将 Web 生成的内容导入到 Java 应用程序中?
javascript - 固定面板 extjs 4.2 的大小
css - 有人能告诉我们是否可以在@media print css 中使用 Font awesome 图标吗?他们像在网络上一样工作吗?
python - Reportlab 和 Fontawesome 字体