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

发布时间：2020-12-14 18:46:40 所属栏目：资源来源：网络整理

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

如何在输入字段中插入日历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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!