在占位符中使用 Font Awesome 圖標

Question

是否可以在占位符中使用 Font Awesome 圖標？ 我讀到占位符中不允許使用 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 圖標只是帶有自定義字體的字符（您可以查看content規則中轉義 Unicode 字符的FontAwesome Cheatsheet 。在變量中找到的 less 源代碼中。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 中綁定值的唯一方法（我知道）是使用內置的助手。 但這會導致占位符被轉義，“&#xF002”就像那樣顯示，文本。

無論您是否使用 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;
      }
    }

如果您只是使用把手，如前所述，您可以將 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>

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

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

最好的部分：您可以為占位符和文本使用不同的字體系列

Answer 12

我以不同的方式解決了這個問題，它可以通過 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;
}

2. 然后調整占位符的文本（對每個人來說都是個人的，在我的情況下，圖標就在文本之前）

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

3. 這是一個圖標在我們的輸入上方並阻止光標點擊的問題，所以我們應該在我們的 CSS 中再添加一行

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

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

4. 但是圖標不會與占位符一起消失，所以我們需要修復它。 這也是我的解決方案的最終版本：

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

Answer 13

由於 Jason 提供的答案中的字體發生變化，因此會有一些輕微的延遲和卡頓。 使用“change”事件而不是“keyup”可以解決這個問題。

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

Answer 14

我在占位符中同時添加了文本和圖標。

placeholder="Edit   "

CSS :

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

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

看起來像這樣：輸入帶有文本前置和搜索符號

Answer 16

Teocci解決方案盡可能簡單，因此，無需添加任何 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>

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>

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