Question

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

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

Answer 1

如果你正在使用FontAwesome 4.7，这就足够了：

＆＃13;

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

＆＃13;

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

Answer 2

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

然而，字体之间的过渡并不顺畅。

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

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

请参阅以下示例：

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

我正在努力解决这个问题并且发现了这篇文章，我从中修改了这些内容：

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

Answer 5

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

如果您使用的是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"

值绑定工作正常！

placeholder example

placeholder gif

Answer 6

有人想知道 Font Awesome 5 实施：

不要指定一般的“Font Awesome 5”字体系列，您需要专门以您正在使用的图标分支结束。在这里，我使用分支“品牌”作为例子。

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

更多细节Use Font Awesome (5) icon in input placeholder text

Answer 7

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

Answer 8

我这样做是通过将fa-placeholder类添加到输入文本：

<input type="text" name="search" class="form-control" placeholder="" />

所以，在css中只需添加：

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

它适用于我。

更新

要在用户输入文字输入时更改字体，只需在字体真棒后添加字体

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

Answer 9

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

最佳部分：您可以为占位符和文本添加不同的字体系列

Answer 10

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

您只需要在输入中添加fas类，并在此情况下放置{strong> valid hex （有效十六进制），以显示Font-Awesome的字形，如下所示&#xf002

您可以在the official web here中找到每个字形的unicode。

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

<input type="text" class="fas" placeholder="&#xf002" />

input {
  padding: 5px;
}

Answer 11

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

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

CSS：

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

Answer 12

由于Jason提供的答案中的字体发生了变化，因此有一些轻微的延迟和震动。使用＆＃34;更改＆＃34;事件代替＆＃34; keyup＆＃34;解决了这个问题。

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

Answer 13

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

Answer 14

我已经以不同的方式解决了这个问题，它可以通过html代码与任何FA图标一起使用。除了使用占位符的所有这些困难之外，我的解决方案是：

以通常的方式放置图标

HybrisResponse hybrisResponse = null;

try {
   // get from cache
   hybrisResponse = productFeederService.cacheable(request);

} catch (Throwable e) {
   // if not in cache then cache it
   hybrisResponse = productFeederService.cachePut(request);
}

return Mono.just(hybrisResponse)
    .map(result -> ResponseBody.<HybrisResponse>builder()
        .payload(result).build())
    .map(ResponseEntity::ok);

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

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

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

但是图标不会与占位符一起消失，因此我们需要对其进行修复。这也是我的解决方案的最终版本：

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

这比我以前想象的要难，但是我希望我能对此有所帮助。

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

Answer 15

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

Teocci solution非常简单，因此不需要添加任何CSS，只需为Font Awesome 5添加class =“ fas”，因为它会向元素添加适当的CSS字体声明。 / p>

以下是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>

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

在占位符中使用Font Awesome图标

17 个答案: