在占位符中使用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="&#xF002;"/> </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="&#xF002;" style="font-family:Arial, FontAwesome" /> 

hex代码的列表可以在Font Awesome的工作表中find。

在支持的地方,你可以使用::input-placeholder伪select::input-placeholder::before结合。

看到一个例子:

http://codepen.io/JonFabritius/pen/nHeJg

我只是在这个工作,碰到这篇文章,我从中修改这个东西:

http://davidwalsh.name/html5-placeholder-css

我使用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="&#xF002;" type="text"> 

如果使用Ember,则将占位符绑定到具有unicode值的控制器属性。

在模板中:

 {{text-field id="listFilter" placeholder=listFilterPlaceholder value=listFilter}} 

在控制器上:

 listFilter: null, listFilterPlaceholder: "\uf002" 

价值绑定工作正常!

占位符的例子

占位符gif

我用这个方法解决了:

在CSS中,我使用fontAwesome类的这个代码:

 .fontAwesome { font-family: 'Helvetica', FontAwesome, sans-serif; } 

在HTML中,我添加了占位符内的fontawesome类fontawesome图标代码

 <input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0; insert email address ..." value=""> 

你可以在CodePen中看到。

使用placeholder="&#xF002;" 在你的input。 你可以在FontAwesome页面http://fontawesome.io/icons/findunicode&#x3002; 但是你必须确保添加style="font-family: FontAwesome;" 在你的input。

我通过添加fa-placeholder类来input文本来做到这一点:

<input type="text" name="search" class="form-control" placeholder="&#xF002;" />

所以,在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="&#xF002;"/> </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] } 

最好的部分:你可以有不同的占位符和文本的字体家族