在占位符中使用Font Awesome图标-Java 学习之路

是否可以在占位符中使用Font Awesome Icon？我读了占位符中不允许HTML的地方 . 有解决方法吗？

placeholder="<i class='icon-search'></i>"

11 回答

184
有人想知道 Font Awesome 5 实施：

不要指定一般的“Font Awesome 5”字体系列，您需要专门以您正在使用的图标分支结束 . 在这里，我使用分支“品牌”为例 .
```
<input style="font-family:'Font Awesome 5 Brands' !important" 
       type="text" placeholder="&#xf167">
```
更多细节Use Font Awesome (5) icon in input placeholder text
回复于 2024-04-26T10:56:18+08:00

忽略jQuery这可以使用 ::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] }

最佳部分：占位符和文本可以有不同的字体系列

回复于 2024-04-26T10:56:18+08:00

我在占位符中添加了文本和图标 .

placeholder="Edit &nbsp; &#xf040;"

CSS：

font-family: FontAwesome,'Merriweather Sans', sans-serif;

回复于 2024-04-26T10:56:18+08:00

40
我用这种方法解决了：

在CSS中，我将此代码用于 fontAwesome class ：
```
.fontAwesome {
  font-family: 'Helvetica', FontAwesome, sans-serif;
}
```
在HTML中，我在占位符中添加了 fontawesome class 和 fontawesome icon code ：
```
<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0;  insert email address ..." value="">
```
你可以在CodePen看到 .
回复于 2024-04-26T10:56:18+08:00
1

在输入中使用 placeholder="" . 您可以在FontAwesome页面http://fontawesome.io/icons/中找到unicode . 但是你必须确保在输入中添加 style="font-family: FontAwesome;" .

回复于 2024-04-26T10:56:18+08:00

随着Jason提供的答案中的字体变化，有一些轻微的延迟和猛烈 . 使用“更改”事件而不是“keyup”可以解决此问题 .

$('#iconified').on('change', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

回复于 2024-04-26T10:56:18+08:00

8

如果支持，您可以使用 ::input-placeholder 伪提取器与 ::before 结合使用 .

查看示例：

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

我正在研究这篇文章并遇到了这篇文章，我修改了这篇文章：

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

回复于 2024-04-26T10:56:18+08:00
9
您可以将不同的字体应用于占位符的一部分，但是，如果您只对图标感到满意，那么它可以正常工作 . FontAwesome图标只是带有自定义字体的字符（您可以在 content 规则中查看转义的Unicode字符的FontAwesome.css . 在variables.less中找到的源代码较少 . 挑战是在输入不为空时交换字体将它与jQuery结合起来，如this .
```
<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');
    }
});
```
但是，字体之间的过渡并不顺畅 .
回复于 2024-04-26T10:56:18+08:00
1
如果您使用 FontAwesome 4.7 ，这应该足够了：
```
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<input type="text" placeholder="&#xF002; Search" style="font-family:Arial, FontAwesome" />
```
可以在Font Awesome cheatsheet中找到十六进制代码列表 . 但是，在最新的FontAwesome 5.0中，此方法不起作用（即使您使用CSS方法结合更新的 font-family ） .
回复于 2024-04-26T10:56:18+08:00
4

我这样做是通过添加 fa-placeholder 类来输入文本：

<input type="text" name="search" class="form-control" placeholder="" />

所以，在CSS中添加这个：

.fa-placholder { font-family: "FontAwesome"; }

这对我来说很有用 .

更新：

要在用户输入文本输入时更改字体，只需在字体很棒之后添加字体

.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }

回复于 2024-04-26T10:56:18+08:00
1
我正在使用Ember（版本1.7.1），我需要绑定输入的值并拥有一个占位符，这是一个FontAwesome图标 . 在Ember（我知道）绑定值的唯一方法是使用内置的帮助器 . 但是这会导致占位符被转义，“＆＃xF002”就像那样显示文本 .

如果您使用的是Ember，则需要将输入占位符的CSS设置为FontAwesome的font-family . 这是SCSS（使用Bourbon for the placeholder styling）：
```
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"
```
并且值绑定工作正常！
回复于 2024-04-26T10:56:18+08:00

在占位符中使用Font Awesome图标

11 回答

相关问题