在文本input元素内的字体真棒图标

我正在尝试在用户名input字段中插入一个用户图标。

我已经尝试了类似问题的解决scheme之一,因为Font Awesome是一种字体,因此background-image属性将不起作用。

以下是我的方法,我无法获得图标显示。

 .wrapper input[type="text"] { position: relative; } .wrapper input[type="text"]:before { font-family: 'FontAwesome'; position: absolute; top: 0px; left: -5px; content: "\f007"; } 

我有在默认字体真棒CSS声明的字体面,所以我不知道如果添加上面的字体家族是正确的方法。

  @font-face { font-family: 'FontAwesome'; src: url('../Font/fontawesome-webfont.eot?v=3.2.1'); src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'); } 

你是对的。 :之前和之后:伪内容不打算在imginput元素之类的replace内容上工作。 添加一个包装元素并声明一个字体系列是一种可能性,就像使用背景图像一样。 或者,也许一个html5占位符文本适合您的需求:

 <input name="username" placeholder="&#61447;"> 

不支持占位符属性的浏览器将会忽略它。

UPDATE

之前的内容select器selectinput: input[type="text"]:before 。 你应该select包装: .wrapper:before 。 请参阅http://jsfiddle.net/allcaps/gA4rx/ 。 我还在封装冗余的地方添加了占位符build议。

 .wrapper input[type="text"] { position: relative; } input { font-family: 'FontAwesome'; } /* This is for the placeholder */ .wrapper:before { font-family: 'FontAwesome'; color:red; position: relative; left: -5px; content: "\f007"; } <p class="wrapper"><input placeholder="&#61447; Username"></p> 

倒退

Font Awesome使用Unicode专用区(PUA)来存储图标。 其他字符不存在并回退到浏览器默认值。 这应该是任何其他input相同。 如果您在input元素上定义了字体,那么在使用图标的情况下提供与回退相同的字体。 喜欢这个:

 input { font-family: 'FontAwesome' YourFont; } 

输出:

在这里输入图像说明

HTML:

 <input name="txtName" id="txtName"> <span class="fa fa-info-circle errspan"></span> 

CSS:

 <style type="text/css"> .errspan { float: right; margin-right: 6px; margin-top: -20px; position: relative; z-index: 2; color: red; } </style> 

你可以使用包装。 在包装器中,添加字体真棒元素iinput元素。

 <div class="wrapper"> <i class="fa fa-icon"></i> <input type="button"> </div> 

然后将包装的位置设置为相对:

 .wrapper { position: relative; } 

然后将i元素的位置设置为绝对位置,并为其设置正确的位置:

 i.fa-icon { position: absolute; top: 10px; left: 50px; } 

(这是一个黑客,我知道,但它完成了工作。)

如果您需要满足以下条件(当前答案不符合这些条件),此答案将适用于您:

  1. 图标文本框内
  2. 当input文本时,图标不应该消失,input的文本会移到图标的右侧
  3. 点击图标应该把基础input带入焦点

我相信3是满足这些条件的最小数量的HTML元素:

 .input-icon{ position: absolute; left: 3px; top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */ } input{ padding-left: 17px; } .input-wrapper{ position: relative; } 
 <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> <div class="input-wrapper"> <input id="stuff"> <label for="stuff" class="fa fa-user input-icon"></label> </div> 

阅读了这个问题的各种版本,并在四处search,我提出了一个相当干净,无js的解决scheme。 它类似于@allcaps解决scheme,但避免了input字体从主文档字体改变的问题。

使用::input-placeholder属性专门设置占位符文本的样式。 这使您可以使用您的图标字体作为占位符字体和您的身体(或其他字体)作为实际的input文本。 目前您需要指定供应商特定的select器。

只要你不需要input元素中的图标和文本的组合,这个效果就很好。 如果你这样做,你将需要忍受占位符文本为默认浏览器字体(我的简单衬线字)。

例如
HTML

 <p class="wrapper"> <input class="icon" type="text" placeholder="&#61442;" /> </p> 

CSS

 .wrapper { font-family:'arial', sans-serif; } input.icon::-webkit-input-placeholder { font-family:'FontAwesome'; } 

摆弄浏览器前缀select器: http : //jsfiddle.net/gA4rx/78/

请注意,您需要将每个浏览器特定的select器定义为单独的规则。 如果你将它们结合起来,浏览器将会忽略它。

不需要编码很多…只需按照以下步骤操作:

 <input id="input_search" type="text" class="fa" placeholder="&#xf002 Search"> 

你可以在这里findUnicode( fontawesome )的链接…

FontAwesome Unicode的图标

我确实是这样做的

  form i { left: -25px; top: 23px; border: none; position: relative; padding: 0; margin: 0; float: left; color: #29a038; } 
 <form> <i class="fa fa-link"></i> <div class="form-group string optional profile_website"> <input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website"> </div> <i class="fa fa-facebook"></i> <div class="form-group url optional profile_facebook_url"> <input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url"> </div> <i class="fa fa-twitter"></i> <div class="form-group url optional profile_twitter_url"> <input class="string url optional form-control" placeholder="http://twitter.com/your-account" type="url" name="profile[twitter_url]" id="profile_twitter_url"> </div> <i class="fa fa-instagram"></i> <div class="form-group url optional profile_instagram_url"> <input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url"> </div> <input type="submit" name="commit" value="Add profile"> </form> 

build立在一切的build议。 这里是最less量的HTML的字体真棒的背景方法:

 <div class="wrapper"><input></div> .wrapper { position: relative; } input { padding-left: 20px; } .wrapper:before { font-family: 'FontAwesome'; position: absolute; top: 2px; left: 3px; content: "\f007"; } 

我尝试了下面的东西,它真的很好的HTML

 input.hai { width: 450px; padding-left: 25px; margin: 15px; height: 25px; background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ; background-size: 20px 20px; background-repeat: no-repeat; background-position: left; background-color: grey; } 
 <div > <input class="hai" placeholder="Search term"> </div> 

使可点击的图标集中在文本input元素内。

CSS

 .myClass { font-size:20px; position:absolute; top:10px; left:10px; } 

HTML

 <div> <label style="position:relative;"> <i class="myClass fa fa-address-book-o"></i> <input class="w3-input" type="text" style="padding-left:40px;"> </label> </div> 

只需在Font Awesome库中的<i>标签内添加您喜欢的任何图标,即可享受结果。

要使用unicode或fontawesome工作,你应该添加一个class如下所示的span

在HTML中:

 <span class="button1 search"></span> <input name="username"> 

在CSS中:

 .button1 { background-color: #B9D5AD; border-radius: 0.2em 0 0 0.2em; box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); pointer-events: none; margin:1px 12px; border-radius: 0.2em; color: #333333; cursor: pointer; position: absolute; padding: 3px; text-decoration: none; } 
 <!doctype html> <html> <head> ## Heading ## <meta charset="utf-8"> <title> Untitled Document </title> </head> <style> li { display: block; width: auto; } ul li> ul li { float: left; } ul li> ul { display: none; position: absolute; } li:hover > ul { display: block; margin-left: 148px; display: inline; margin-top: -52px; } a { background: #f2f2ea; display: block; /*padding:10px 5px; */ width: 186px; height: 50px; border: solid 2px #c2c2c2; border-bottom: none; text-decoration: none; } li:hover >a { background: #ffffff; } ul li>li:hover { margin: 12px auto 0px auto; padding-top: 10px; width: 0; height: 0; border-top: 8px solid #c2c2c2; } .bottom { border-bottom: solid 2px #c2c2c2; } .sub_m { border-bottom: solid 2px #c2c2c2; } .sub_m2 { border-left: none; border-right: none; border-bottom: solid 2px #c2c2c2; } li.selected { background: #6D0070; } #menu_content { /*float:left; */ } .ca-main { padding-top: 18px; margin: 0; color: #34495e; font-size: 18px; } .ca-sub { padding-top: 18px; margin: 0px 20px; color: #34495e; font-size: 18px; } .submenu a { width: auto; } h2 { text-align: center; } </style> <body> <ul> <li> <a href="#"> <div id="menu_content"> <h2 class="ca-main"> Item 1 </h2> </div> </a> <ul class="submenu" > <li> <a href="#" class="sub_m"> <div id="menu_content"> <h2 class="ca-sub"> Item 1_1 </h2> </div> </a> </li> <li> <a href="#" class="sub_m2"> <div id="menu_content"> <h2 class="ca-sub"> Item 1_2 </h2> </div> </a> </li> <li > <a href="#" class="sub_m"> <div id="menu_content"> <h2 class="ca-sub"> Item 1_3 </h2> </div> </a> </li> </ul> </li> <li> <a href="#"> <div id="menu_content"> <h2 class="ca-main"> Item 2 </h2> </div> </a> </li> <li> <a href="#"> <div id="menu_content"> <h2 class="ca-main"> Item 3 </h2> </div> </a> </li> <li> <a href="#" class="bottom"> <div id="menu_content"> <h2 class="ca-main"> Item 4 </h2> </div> </a> </li> </ul> </body> </html>