在占位符中使用Font Awesome图标

Question

能否在占位符中使用Font Awesome图标？我读到HTML在占位符中不被允许，有没有解决办法？

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

- L84

Answer 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 中，这种方法不起作用（即使您使用与更新的 font-family 结合使用的 CSS 方法）。

- Elli

---

你从哪里得到了这个值？我的意思是，你是怎么从icon-search变成了的？ - Ігар Цімошка

你甚至不需要添加 id="iconified"，只需添加 class="fa"，Font Awesome 将为你处理 CSS 样式。 - Pedro Hoehl Carvalho

为了让它正常工作，我不得不改变字体的顺序：<input type="text" placeholder="&#xf002; 搜索博客" style="font-family: FontAwesome, Arial; font-style: normal">，否则会显示一个包含“fl”的符号。 - Guillaume Renoult

这些十六进制代码都显示在作弊表上，您可以在 https://fortawesome.github.io/Font-Awesome/cheatsheet/ 上查看。 - Liam George Betsworth

我已经在Font Awesome 5中将其运作良好。链接 - Richard

Answer 2

由于无法对占位符的一部分应用不同的字体，因此您不能添加图标和文本，但是，如果您只满意于仅有图标，则可以使用它。 FontAwesome图标只是具有自定义字体的字符（您可以在FontAwesome备忘单中查看content规则中转义的Unicode字符。在less源代码中，它可以在variables.less中找到。挑战将是在输入不为空时交换字体。像这样结合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');
    }
});

字体之间的转换不会很平滑。

- Jason Sperske

---

FontAwesome会为所有非Unicode符号显示常规字符。对于我来说，插入Unicode实体无效，但是粘贴符号有效：placeholder=" Hello"。 - DanielKhan

使用FontAwesome 5时，请改用font-family: Font Awesome\ 5 Free;。 - Andrew Schultz

@AndrewSchultz，font-family: Font Awesome\ 5 Free;无法正常工作。我不得不使用font-family: FontAwesome;。 - kanlukasz

实际上，您可以将不同的字体应用于输入框。我曾在安装了FA5 Pro的网站上这样做，并将font-family: 'Font Awesome 5 Pro', 'Montserrat'; 应用于搜索框，效果非常好。 - Jeff W

@JeffW 它适用于FA5，但不适用于FA6。 - Sami Ahmed Siddiqui

Answer 3

我用以下方法解决了这个问题：

在CSS中，我使用了以下代码来处理fontAwesome类：

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

在HTML中，我已添加了< strong>fontawesome类和< strong>fontawesome图标代码在占位符内部：

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

你可以在CodePen上查看。

- huckbit

---

这也适用于FA5 Pro，使用input[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; } - ChrisB

Answer 4

@Elli的回答可以在FontAwesome 5中使用，但需要使用正确的字体名称和该版本特定的CSS。例如，在使用FA5 Free时，如果我包含了all.css，则无法让它正常工作，但是如果我包含solid.css，则可以正常工作：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">

<input type="text" placeholder="&#xF002; Search" style="font-family: Arial, 'Font Awesome 5 Free'" />

对于FA5 Pro，字体名称为“Font Awesome 5 Pro”

- Richard

Answer 5

如果支持的话，您可以使用 ::input-placeholder 伪选择器与 ::before 结合使用。

请参见以下示例：

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

我之前在这方面做了一些工作，然后看到了这篇文章，从中修改了这些内容:

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

- Jon Fabritius

---

在Firefox 27中这个似乎不起作用，你能否请重新查看一下？我搞不明白。 - Noitidart

Answer 6

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

- Junkkung HangHeng

Answer 7

我正在使用Ember（版本1.7.1），需要绑定输入值并具有一个作为FontAwesome图标的占位符。在Ember中绑定值的唯一方法（据我所知）是使用内置助手。但这会导致占位符被转义，“＆amp;#xF002”就像这样显示为文本。

无论您是否使用Ember，都需要设置输入的占位符CSS，使其具有FontAwesome字体族。这是SCSS（使用Bourbon进行占位符样式）：

    input {
      width:96%;
      margin:5px 2%;
      padding:0 8px;
      border:1px solid #444;
      border-radius: 14px;
      background: #fff;
      @include placeholder {
        font-family: 'FontAwesome', $gotham;
      }
    }

如果你只是使用handlebars，就像之前提到的那样，你只需将html实体设置为占位符：

<input id="listFilter" placeholder="&#xF002;" type="text">

如果您正在使用Ember，请将占位符绑定到具有Unicode值的控制器属性。

在模板中：

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

在控制器上：

listFilter: null,
listFilterPlaceholder: "\uf002"

而且值绑定很好用！

- RustyToms

---

这是使用Ember 1.7.1。 - RustyToms

对于那些使用其他网络技术的人来说，这是一篇不错的文章。 - L84

非常感谢！我已经挠了好一会儿头，感谢您详细解决方案！ - Moe Tsao

Answer 8

我知道这个问题很老。但我没有看到像我以前使用的那样简单的答案。

你只需要将fas类添加到输入框中，并在这种情况下放入一个有效的十六进制值，例如 Font-Awesome 的符号 &#xf002，如下所示：<input type="text" class="fas" placeholder="&#xf002" />

您可以在官方网站上找到每个图标的 Unicode。

这是一个简单的例子，您不需要 CSS 或 JavaScript。

input {
  padding: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form role="form">
  <div class="form-group">
    <input type="text" class="fas" placeholder="&#xf002" />
  </div>
</form>

- Teocci

---

这是 Font Awesome 5 的答案。谢谢！ - laviex

Answer 9

如果你在考虑使用Font Awesome 5，以下是一些相关内容：

不要指定通用的“Font Awesome 5”字体族，需要具体指定你所使用的图标分支。例如，在这里我使用了“Brands”分支。

<input style="font-family:'Font Awesome 5 Brands' !important" 
       type="text" placeholder="&#xf167">

更多细节请参考在输入框的占位符文本中使用Font Awesome (5)图标

- Thomas Lindauer

Answer 10

我通过将 fa-placeholder 类添加到输入文本中来实现此目的： <input type="text" name="search" class="form-control" placeholder="&#xF002;" /> 因此，在 CSS 中只需添加以下内容： .fa-placholder { font-family: "FontAwesome"; } 这对我很有效。

更新：

要在用户输入文本时更改字体，只需在 Font Awesome 后面添加您的字体即可。 .fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }

- user4913965