在占位符中使用字体超赞图标

有可能在占位符中使用字体超赞图标吗？我读到 HTML 不允许出现在占位符中。有解决办法吗？

placeholder="<i class='icon-search'></i>"
282112 次浏览
小开
最佳答案

您不能添加图标和文本，因为您不能将不同的字体应用到占位符的一部分，但是，如果您只满足于一个图标，那么它可以工作。FontAwesome 图标只是自定义字体的字符(你可以在 content规则中查看转义 Unicode字符的 FontAwesome 备忘录。在较少的源代码中，在 变量更少中可以找到。当输入不是空的时候，要交换字体将是一个挑战。将它与像 这个这样的 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');
}
});

然而，字体之间的转换并不平滑。

小开

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

参见下面的例子:

Http://codepen.io/jonfabritius/pen/nhejg

我正在写这篇文章，然后看到了这篇文章，我从中修改了这些内容:

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

小开

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

十六进制编码的列表可以在 字体超赞的小抄中找到。但是，在最新的 FontAwesome 5.0中，这种方法不起作用(即使您使用 CSS 方法结合更新的 font-family)。

小开

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

如果您使用 Ember 或不使用 Ember，则需要设置输入占位符的 CSS，以便拥有 FontAwesome 的 font-family。这是 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"

值绑定工作正常！

placeholder example

placeholder gif

小开

我用这种方法解决了:

In the CSS I used this code for the FontAwesome 类:

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

In the HTML I have added the 太棒了 and the 字体酷炫的图标代码 inside the placeholder:

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

You can see in CodePen.

小开

由于 Jason 提供的答案中的字体发生了变化，所以有一些轻微的延迟和混乱。使用“ change”事件而不是“ keyup”可以解决这个问题。

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

为此，我将 fa-placeholder类添加到输入文本:

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

所以，在 css 中只需要添加以下内容:

Font-family: “ FontAwesome”; }

对我很有效。

更新:

要改变字体，而用户键入您的文本输入，只需添加您的字体后字体真棒

font-family: "FontAwesome", "Source Sans Pro"; }

小开

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

小开

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

最精彩的部分: 可以为占位符和文本使用不同的字体系列

小开

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

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

CSS:

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

任何想了解 超赞字体5实现的人:

不要指定一个通用的“ Font Awesome 5”字体系列，你需要特别结束与分支图标你的工作。这里我使用分支“ Brands”作为例子。

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

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

小开

如果你可以/想要使用 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>

看起来像这样: 输入文本-前置和搜索符号

小开

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

您只需要将 fas类添加到输入中，并在这个示例中为 Font-Awesome 的标志符号放入 有效的咒语，就像这里的 <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>

小开

@ 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”

小开

Teocci 解决方案 is as simple as it can be, thus, no need to add any CSS, just add class="fas" for Font Awesome 5, since it adds proper CSS font declaration to the element.

下面是 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>
小开

我用不同的方法解决了这个问题，它通过 html 代码与任何 FA 图标一起工作。与占位符带来的所有这些困难相反，我的解决方案是:

  1. 以通常的方式放置图标
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;
}
  1. 然后调整占位符的文本(对于每个人来说都是私人的，在我的例子中，图标就在文本之前)
HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder="    Some text"...
  1. 这里的问题是，一个图标是在我们的输入和块光标点击，所以我们应该添加一个更多的行在我们的 CSS
CSS
.block__icon {
position: absolute;
margin: some-corrections;


/* The new line */
pointer-events: none;
}
  1. 但是图标不会和占位符一起消失，所以我们需要修复它。这也是我的解决方案 最终版本:
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;
}

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

编码: https://codepen.io/dzakh/pen/YzKqJvy

小开

Sometimes above all answer not woking, when you can use below trick

.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>

小开 
<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;
}

提交答案