在文本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'); }
你是对的。 ：之前和之后：伪内容不打算在img和input元素之类的replace内容上工作。 添加一个包装元素并声明一个字体系列是一种可能性，就像使用背景图像一样。 或者，也许一个html5占位符文本适合您的需求：
<input name="username" placeholder="">
不支持占位符属性的浏览器将会忽略它。
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=" 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>
你可以使用包装。 在包装器中，添加字体真棒元素i和input元素。
<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; }
（这是一个黑客，我知道，但它完成了工作。）
如果您需要满足以下条件（当前答案不符合这些条件），此答案将适用于您：
- 图标在文本框内
- 当input文本时，图标不应该消失，input的文本会移到图标的右侧
- 点击图标应该把基础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="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="" /> </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=" 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('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>
