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

概述如何在输入字段中插入日历Web字体图标？ HTML： <input class="start_date" type="text"> CSS： .start_date:before { font-family: "FontAwesome"; content: "\f073";} <输入>是一个自动关闭的标签,你 cannot有任何：before或：after伪元素.你可以把它包装成< la 如何在输入字段中插入日历Web字体图标？

HTML：

<input  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 >  <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 >  <input type="text" placeholder="Date" /></label>

总结

以上是内存溢出为你收集整理的HTML – 如何将字体真棒图标插入文本输入？全部内容，希望文章能够帮你解决HTML – 如何将字体真棒图标插入文本输入？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。