在占位符中使用Font Awesome图标

Question

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

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

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备忘单中找到十六进制代码列表.但是,在最新的FontAwesome 5.0中,此方法不起作用(即使您使用结合更新的CSS方法font-family).

Answer 2

您无法添加图标和文本,因为您无法将其他字体应用于占位符的一部分,但是,如果您只对图标感到满意,那么它可以正常工作.FontAwesome图标只是带有自定义字体的字符(您可以查看规则中转义的Unicode字符的FontAwesome.csscontent.在较少的源代码中,它们可以在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');
    }
});

但是,字体之间的过渡并不顺畅.

Answer 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中看到.

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”

Answer 5

在支持的地方,您可以使用::input-placeholder伪选择器::before.

查看示例:

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

我正在研究这篇文章并遇到了这篇文章,我修改了这篇文章:

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

Answer 6

我正在使用Ember(版本1.7.1),我需要绑定输入的值并有一个占位符是FontAwesome图标.在Ember(我知道)中绑定值的唯一方法是使用内置帮助器.但这会导致占位符被转义,""就像那样显示文本.

如果您使用的是Ember,则需要将输入占位符的CSS设置为FontAwesome的font-family.这是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;
      }
    }

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

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

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

在模板中:

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

在控制器上:

listFilter: null,
listFilterPlaceholder: "\uf002"

并且值绑定工作正常!

Answer 7

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

Answer 8

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

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

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

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

Answer 9

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

您只需要将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>