Html 在占位符中使用 Font Awesome 图标

Use Font Awesome Icon in Placeholder

提问by L84

Is it possible to use Font Awesome Icon in a Placeholder? I read where HTML isn't allowed in a placeholder. Is there a workaround?

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

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

采纳答案by Jason Sperske

You can't add an icon and text because you can't apply a different font to part of a placeholder, however, if you are satisfied with just an icon then it can work. The FontAwesome icons are just characters with a custom font (you can look at the FontAwesome Cheatsheetfor the escaped Unicode character in the contentrule. In the less source code it's found in variables.lessThe challenge would be to swap the fonts when the input is not empty. Combine it with jQuery like this.

您无法添加图标和文本，因为您无法对占位符的一部分应用不同的字体，但是，如果您只对一个图标感到满意，那么它就可以工作。FontAwesome 图标只是带有自定义字体的字符（您可以查看规则中转义 Unicode 字符的FontAwesome Cheatsheetcontent。在变量中找到的 less 源代码中。less挑战是在输入时交换字体不为空。像这样将它与 jQuery 结合起来。

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/>
  </div>
</form>

With this CSS:

使用这个 CSS：

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

And this (simple) jQuery

而这个（简单的）jQuery

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

The transition between fonts will not be smooth, however.

但是，字体之间的过渡不会平滑。

回答by Elli

If you're using FontAwesome 4.7this should be enough:

如果你正在使用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" />

A list of hex codes can be found in the Font Awesome cheatsheet. However, in the lastest FontAwesome 5.0 this method does not work (even if you use the CSS approach combined with the updated font-family).

可以在Font Awesome 备忘单 中找到十六进制代码列表。但是，在最新的 FontAwesome 5.0 中，此方法不起作用（即使您将 CSS 方法与更新的 结合使用font-family）。

回答by huckbit

I solved with this method:

我用这个方法解决了：

In the CSS I used this code for the fontAwesome class:

在 CSS 中，我将此代码用于fontAwesome 类：

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

In the HTML I have added the fontawesome classand the fontawesome icon codeinside the placeholder:

在 HTML 中，我在占位符中添加了fontawesome 类和fontawesome 图标代码：

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

You can see in CodePen.

您可以在CodePen 中看到。

回答by Richard

@Elli's answer can work in FontAwesome 5, but it requires using the correct font name and using the specific CSS for the version you want. For example when using FA5 Free, I could not get it to work if I included the all.css, but it worked fine if I included the solid.css:

@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'" />

For FA5 Pro the font name is 'Font Awesome 5 Pro'

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

回答by Jon Fabritius

Where supported, you can use the ::input-placeholderpseudoselector combined with ::before.

在支持的情况下，您可以将::input-placeholder伪选择器与::before.

See an example at:

请参阅以下示例：

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

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

I was just working on this and came across this article, from which I modified this stuff:

我刚刚在做这个并遇到了这篇文章，我从中修改了这些东西：

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

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

回答by RustyToms

I am using Ember (version 1.7.1) and I needed to both bind the value of the input and have a placeholder that was a FontAwesome icon. The only way to bind the value in Ember (that I know of) is to use the built in helper. But that causes the placeholder to be escaped, "&#xF002" just shows up just like that, text.

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

If you are using Ember or not, you need to set the CSS of the input's placeholder to have a font-family of FontAwesome. This is SCSS (using Bourbon for the placeholder styling):

无论您是否使用 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;
      }
    }

If you are just using handlebars, as has been mentioned before you can just set the html entity as the placeholder:

如果您只是使用把手，如前所述，您可以将 html 实体设置为占位符：

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

If you are using Ember bind the placeholder to a controller property that has the unicode value.

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

in the template:

在模板中：

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

on the controller:

在控制器上：

listFilter: null,
listFilterPlaceholder: "\uf002"

And the value binding works fine!

值绑定工作正常！

回答by Junkkung HangHeng

Use placeholder=""in your input. You can find unicode in FontAwesome page http://fontawesome.io/icons/. But you have to make sure add style="font-family: FontAwesome;"in your input.

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

回答by Thomas Lindauer

Anyone wondering about a Font Awesome 5implementation:

任何想知道Font Awesome 5实现的人：

Do not specify a general "Font Awesome 5" font family, you need to specifically end with the branch of icons you're working with. Here I am using the branch "Brands" for example.

不要指定通用的“Font Awesome 5”字体系列，您需要特别以您正在使用的图标分支结束。例如，我在这里使用分支“品牌”。

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

More detail Use Font Awesome (5) icon in input placeholder text

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

回答by Thomas Lindauer

I do this by adding fa-placeholderclass to input text:

我通过向fa-placeholder输入文本添加类来做到这一点：

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

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

so, in css just add this:

所以，在css中添加这个：

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

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

It works well for me.

这对我来说很有用。

Update:

更新：

To change font while user type in your text input, just add your font after font awesome

要在用户输入文本时更改字体，只需在 font awesome 后添加字体即可

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

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

回答by Teocci

I know this question it is very old. But I didn't see any simple answer like I used to use.

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

You just need to add the fasclass to the input and put a valid hexin this case &#xf002for Font-Awesome's glyph as here <input type="text" class="fas" placeholder="&#xf002" />

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

You can find the unicode of each glyph in the official web here.

您可以在此处的官方网站中找到每个字形的 unicode 。

This is a simple example you don't need css or javascript.

这是一个不需要 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>