将字体真棒图标插入文本输入字段 [英] Insert font awesome icon into text input field

问题描述

如何在我的输入字段中插入日历网络字体图标？

 < input class =webfont_calendar start_date id =from/> 
  

是一个自动结束标记，您 cannot 有任何：之前或：之后元素就可以了。您可以将它包装到< label> 或< span> >

  .webfont_calendar：before {font-family：FontAwesome; content：\f073;}  

 < link rel =stylesheethref =// maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css\"> ;<label class =webfont_calendar> < input type =text>< / label>  

这是一个将图标放置在输入字段中的示例。

  .webfont_calendar {position：relative;}。webfont_calendar： before {font-family：FontAwesome; font-size：14px; content：\f073; position：absolute; left：4px; top：2px;}。webfont_calendar input {text-indent：20px;}  

 < link rel =stylesheethref =// maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css\"> ;<label class =webfont_calendar > < input type =textplaceholder =Jun 16，2015/>< / label>  

How can I insert a calendar web font icon into my input field?

<input class="webfont_calendar start_date" id="from"/> 

解决方案

<input> is a self-closing tag, you cannot have any :before or :after pseudo element on it. You could wrap it into a <label> or <span> so and attach it there.

.webfont_calendar:before {
  font-family: "FontAwesome";
  content: "\f073";
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<label class="webfont_calendar">
  <input type="text">
</label>

Here is an example of having the icon to be positioned inside the input field.

.webfont_calendar {
  position: relative;
}
.webfont_calendar:before {
  font-family: "FontAwesome";
  font-size: 14px;
  content: "\f073";
  position: absolute;
  left: 4px;
  top: 2px;
}
.webfont_calendar input {
  text-indent: 20px;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<label class="webfont_calendar">
  <input type="text" placeholder="Jun 16, 2015" />
</label>

这篇关于将字体真棒图标插入文本输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！