在占位符中使用Font Awesome图标
是否可以在占位符中使用Font Awesome Icon？ 我读了HTML在占位符中是不允许的。 有没有解决方法？
placeholder="<i class='icon-search'></i>" 你不能添加一个图标和文字，因为你不能将一个不同的字体应用到占位符的一部分，但是，如果你只对一个图标感到满意，那么它就可以工作。 FontAwesome图标只是带有自定义字体的字符（在content规则中，您可以查看FontAwesome.css中已转义的Unicode字符。在较less的源代码中find了variables 。 无法解决的问题是当字体input不是空的，像这样与jQuery结合。
<form role="form"> <div class="form-group"> <input type="text" class="form-control empty" id="iconified" placeholder=""/> </div> </form>
有了这个CSS：
input.empty { font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; }
而这个（简单的）jQuery
$('#iconified').on('keyup', function() { var input = $(this); if(input.val().length === 0) { input.addClass('empty'); } else { input.removeClass('empty'); } });
然而，字体之间的转换并不平坦。
如果你使用FontAwesome这应该是足够的：
<input type="text" placeholder="" style="font-family:Arial, FontAwesome" />
hex代码的列表可以在Font Awesome的工作表中find。
在支持的地方，你可以使用::input-placeholder伪select::input-placeholder与::before结合。
看到一个例子：
http://codepen.io/JonFabritius/pen/nHeJg
我只是在这个工作，碰到这篇文章，我从中修改这个东西：
我使用Ember（版本1.7.1），我需要绑定input的值，并有一个FontAwesome图标的占位符。 绑定在Ember（我知道）的价值的唯一方法是使用内置的助手。 但是这会导致占位符被转义，“＆＃xF002”就像那个文字一样显示出来。
如果您使用的是Ember，则需要将input的占位符的CSS设置为FontAwesome的字体系列。 这是SCSS（使用波旁的占位符造型 ）：
input { width:96%; margin:5px 2%; padding:0 8px; border:1px solid #444; border-radius: 14px; background: #fff; @include placeholder { font-family: 'FontAwesome', $gotham; } }
如果你只是使用句柄，正如之前所提到的，你可以将html实体设置为占位符：
<input id="listFilter" placeholder="" type="text">
如果使用Ember，则将占位符绑定到具有unicode值的控制器属性。
在模板中：
{{text-field id="listFilter" placeholder=listFilterPlaceholder value=listFilter}}
在控制器上：
listFilter: null, listFilterPlaceholder: "\uf002"
价值绑定工作正常！
我用这个方法解决了：
在CSS中，我使用fontAwesome类的这个代码：
.fontAwesome { font-family: 'Helvetica', FontAwesome, sans-serif; }
在HTML中，我添加了占位符内的fontawesome类和fontawesome图标代码 ：
<input type="text" class="fontAwesome" name="emailAddress" placeholder=" insert email address ..." value="">
你可以在CodePen中看到。
使用placeholder="" 在你的input。 你可以在FontAwesome页面http://fontawesome.io/icons/findunicode。; 但是你必须确保添加style="font-family: FontAwesome;" 在你的input。
我通过添加fa-placeholder类来input文本来做到这一点：
<input type="text" name="search" class="form-control" placeholder="" />
所以，在CSS中添加这个：
.fa-placholder { font-family: "FontAwesome"; }
它适合我。
更新：
要在用户input文字input时改变字体，只需在字体真棒后添加字体
.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }
由于Jason提供的答案中的字体发生了变化，所以有一些轻微的延迟和下降。 使用“change”事件而不是“keyup”来解决这个问题。
$('#iconified').on('change', function() { var input = $(this); if(input.val().length === 0) { input.addClass('empty'); } else { input.removeClass('empty'); } });
忽略jQuery，这可以使用input元素的::placeholder来完成。
<form role="form"> <div class="form-group"> <input type="text" class="form-control name" placeholder=""/> </div> </form>
CSS的一部分
input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] } input.name{ font-family:[font family you want to specify] }
最好的部分：你可以有不同的占位符和文本的字体家族
