在占位符中使用 Font Awesome 图标答案

【问题标题】：Use Font Awesome Icon in Placeholder在占位符中使用 Font Awesome 图标
【发布时间】：2013-10-21 10:21:32
【问题描述】：

是否可以在占位符中使用 Font Awesome 图标？我读到占位符中不允许使用 HTML。有解决办法吗？

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

【问题讨论】：

标签： html font-awesome placeholder

【解决方案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）。

【讨论】：

您从哪里获得&#xF002; 值？我的意思是你如何从icon-search 到&#xF002？
你甚至不需要 id="iconified" 只需添加 class="fa" 和 font awesome 会为你处理 css。
我必须更改字体顺序才能使其正常工作：<input type="text" placeholder="&#xf002; Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">。否则会显示一个包含“fl”的符号。
@ІгарЦімошка 十六进制代码都显示在备忘单上fortawesome.github.io/Font-Awesome/cheatsheet
我已经got this working in Font Awesome 5

【解决方案2】：

您不能添加图标和文本，因为您不能将不同的字体应用到占位符的一部分，但是，如果您对一个图标感到满意，那么它就可以工作。 FontAwesome 图标只是具有自定义字体的字符（您可以在content 规则中查看FontAwesome Cheatsheet 中的转义Unicode 字符。在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');
    }
});

然而，字体之间的过渡并不平滑。

【讨论】：

FontAwesome 将为所有非 unicode 符号显示常规字符。对我来说，插入 unicode 实体不起作用，但粘贴符号有效：placeholder=" Hello"
使用 FontAwesome 5 使用 font-family: Font Awesome\ 5 Free；而是。
@AndrewSchultz，font-family: Font Awesome\ 5 Free; 不起作用。我只需要使用font-family: FontAwesome;
其实你可以对输入应用不同的字体。我在安装了 FA5 Pro 时做到了这一点，并将font-family: 'Font Awesome 5 Pro', 'Montserrat'; 应用于搜索字段，效果很好。

【解决方案3】：

我用这个方法解决了：

在 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看到。

【讨论】：

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

【解决方案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”

【讨论】：

【解决方案5】：

在受支持的情况下，您可以将 ::input-placeholder 伪选择器与 ::before 结合使用。

查看示例：

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

我正在研究这个并偶然发现了这篇文章，我从中修改了这些东西：

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

【讨论】：

这在 Firefox 27 中不太适用，请您重新访问一下，我想不通。

【解决方案6】：

我正在使用 Ember（版本 1.7.1），我需要绑定输入的值并拥有一个占位符，它是一个 FontAwesome 图标。在 Ember 中绑定值的唯一方法（我知道）是使用内置的帮助器。但这会导致占位符被转义，“”就这样显示出来，文本。

如果您使用或不使用 Ember，您需要将输入占位符的 CSS 设置为具有 FontAwesome 的字体系列。这是 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"

并且值绑定工作正常！

【讨论】：

这是使用 Ember 1.7.1
对于那些使用其他网络技术的人来说是个好帖子。
非常感谢！挠了挠头。感谢您详细说明解决方案！

【解决方案7】：

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

【讨论】：

【解决方案8】：

任何想了解 Font Awesome 5 实现的人：

不要指定通用的“Font Awesome 5”字体系列，您需要专门以您正在使用的图标分支结尾。这里我以“Brands”分支为例。

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

【讨论】：

【解决方案9】：

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

您只需将fas 类添加到输入中，并在这种情况下为&#xf002 为Font-Awesome 的字形添加一个有效的十六进制，如<input type="text" class="fas" placeholder="&#xf002" />

您可以在the official web here 中找到每个字形的 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>

【讨论】：

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

【解决方案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"; }

【讨论】：

【解决方案11】：

忽略 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] }

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

【讨论】：

【解决方案12】：

我解决了这个问题有点不同，它可以通过 html 代码与任何 FA 图标一起使用。我的解决方案是：

以通常的方式放置图标

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="Some text">

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;
}
.block__input {
  padding: some-corrections;
}

然后调整占位符的文本（对每个人来说都是个人的，在我的例子中，图标就在文本之前）

HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder="    Some text"...

这里的问题是图标在我们的输入上方并阻止光标单击，因此我们应该在 CSS 中再添加一行

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;

  /* The new line */
  pointer-events: none;
}

但是图标并没有与占位符一起消失，所以我们需要修复它。这也是我的解决方案的最终版本：

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="    Some text">

CSS
.block__icon {
  position: absolute;
  z-index: 2; /* New line */
  margin: some-corrections;
}
.block__input {
  position: relative; /* New line */
  z-index: 2; /* New line */
  padding: some-corrections;
}
/* New */
.block__input:placeholder-shown {
    z-index: 1;
}

这比我以前想象的要难，但我希望我能帮助任何人。

Codepen：https://codepen.io/dzakh/pen/YzKqJvy

【讨论】：

真的很喜欢你的回答，因为它是一个无 JS 的解决方案。将在这里添加我的 2 美分。首先，请注意这里的支持（伪选择器是相当新的，并且不会在任何旧的类似 IE 的浏览器中得到支持）。其次，频繁更改 z-index 可能会影响性能（并且您无法对其进行动画处理）。因此，我建议改为更改不透明度。见这里：codepen.io/matis28/pen/dyOpgob

【解决方案13】：

随着 Jason 提供的答案中字体的变化，会有一些轻微的延迟和卡顿。使用“change”事件而不是“keyup”可以解决这个问题。

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

【讨论】：

【解决方案14】：

我在占位符中同时添加了文本和图标。

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

CSS：

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

【讨论】：

【解决方案15】：

如果您可以/想要使用 Bootstrap，解决方案将是输入组：

<div class="input-group">
 <div class="input-group-prepend">
  <span class="input-group-text"><i class="fa fa-search"></i></span>
  </div>
 <input type="text" class="form-control" placeholder="-">
</div>

大概是这样的：input with text-prepend and search symbol

【讨论】：

【解决方案16】：

Teocci solution 尽可能简单，因此无需添加任何 CSS，只需为 Font Awesome 5 添加 class="fas"，因为它为元素添加了正确的 CSS 字体声明。

这是 Bootstrap 导航栏中搜索框的示例，搜索图标添加到输入组和占位符（当然，为了演示，没有人会同时使用两者）。图片： https://i.imgur.com/v4kQJ77.png "> 代码：

<form class="form-inline my-2 my-lg-0">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
        </div>
        <input type="text" class="form-control fas text-right" placeholder="&#xf002;" aria-label="Search string">
        <div class="input-group-append">
            <button class="btn btn-success input-group-text bg-success text-white border-0">Search</button>
        </div>
    </div>
</form>

【讨论】：

【解决方案17】：

有时最重要的是回答不醒，当您可以使用以下技巧时

.form-group {
  position: relative;
}

input {
  padding-left: 1rem;
}

i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

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

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="search">
    <i class="fas fa-search"></i>
  </div>
</form>

【讨论】：

问题专门要求在占位符内添加一个图标，但并不总是在那里显示。

【解决方案18】：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="search">
    <i class="fas fa-search"></i>
  </div>
</form>

.form-group {
  position: relative;
}
i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}
input {
  padding-left: 1rem;
}

【讨论】：