Sử dụng Biểu tượng Phông chữ Tuyệt vời trong Trình giữ chỗ

Có thể sử dụng Biểu tượng Phông chữ Tuyệt vời trong Trình giữ chỗ không? Tôi đã đọc nơi HTML không được phép trong trình giữ chỗ. Có một giải pháp thay thế?

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

Bạn không thể thêm biểu tượng và văn bản vì bạn không thể áp dụng phông chữ khác cho một phần của trình giữ chỗ, tuy nhiên, nếu bạn hài lòng với chỉ một biểu tượng thì nó có thể hoạt động. Các biểu tượng FontAwesome chỉ là các ký tự có phông chữ tùy chỉnh (bạn có thể xem FontAwesome Cheatsheet để biết ký tự Unicode đã thoát trong contentquy tắc. Trong mã nguồn ít hơn, nó được tìm thấy trong các biến . Ngoại trừ thử thách sẽ là hoán đổi phông chữ khi đầu vào là không rỗng. Hãy kết hợp nó với jQuery như thế này .

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

Với CSS này:

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

Và jQuery (đơn giản) này

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

Tuy nhiên, quá trình chuyển đổi giữa các phông chữ sẽ không mượt mà.

Nếu bạn đang sử dụng, FontAwesome 4.7điều này là đủ:

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

Bạn có thể tìm thấy danh sách mã hex trong bảng cheatsheet của Font Awesome . Tuy nhiên, trong FontAwesome 5.0 mới nhất, phương pháp này không hoạt động (ngay cả khi bạn sử dụng phương pháp CSS kết hợp với bản cập nhật font-family).

Tôi đã giải quyết bằng phương pháp này:

Trong CSS, tôi đã sử dụng mã này cho lớp fontAwesome :

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

Trong HTML, tôi đã thêm lớp fontawesome và mã biểu tượng fontawesome bên trong trình giữ chỗ:

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

Bạn có thể xem trong CodePen .

Câu trả lời của @ Elli có thể hoạt động trong FontAwesome 5, nhưng nó yêu cầu sử dụng tên phông chữ chính xác và sử dụng CSS cụ thể cho phiên bản bạn muốn. Ví dụ: khi sử dụng FA5 Free, tôi không thể làm cho nó hoạt động nếu tôi bao gồm all.css, nhưng nó hoạt động tốt nếu tôi bao gồm 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'" />

Đối với FA5 Pro, tên phông chữ là 'Font Awesome 5 Pro'

Nếu được hỗ trợ, bạn có thể sử dụng trình ::input-placeholderdò giả kết hợp với ::before.

Xem ví dụ tại:

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

Tôi chỉ đang làm việc này và xem qua bài viết này, từ đó tôi đã sửa đổi nội dung này:

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

Tôi đang sử dụng Ember (phiên bản 1.7.1) và tôi cần phải liên kết cả giá trị của đầu vào và có trình giữ chỗ là biểu tượng FontAwesome. Cách duy nhất để ràng buộc giá trị trong Ember (mà tôi biết) là sử dụng trình trợ giúp tích hợp sẵn. Nhưng điều đó khiến trình giữ chỗ bị thoát, "& # xF002" chỉ hiển thị như vậy, văn bản.

Nếu bạn đang sử dụng Ember hay không, bạn cần đặt CSS của trình giữ chỗ của đầu vào để có họ phông chữ là FontAwesome. Đây là SCSS (sử dụng Bourbon cho kiểu giữ chỗ ):

    input {
      width:96%;
      margin:5px 2%;
      padding:0 8px;
      border:1px solid #444;
      border-radius: 14px;
      background: #fff;
      @include placeholder {
        font-family: 'FontAwesome', $gotham;
      }
    }

Nếu bạn chỉ đang sử dụng thanh điều khiển, như đã được đề cập trước đây, bạn chỉ có thể đặt thực thể html làm trình giữ chỗ:

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

Nếu bạn đang sử dụng Ember, hãy liên kết trình giữ chỗ với thuộc tính bộ điều khiển có giá trị unicode.

trong mẫu:

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

trên bộ điều khiển:

listFilter: null,
listFilterPlaceholder: "\uf002"

Và giá trị ràng buộc hoạt động tốt!

Sử dụng placeholder=""đầu vào của bạn. Bạn có thể tìm thấy unicode trong trang FontAwesome http://fontawesome.io/icons/ . Nhưng bạn phải đảm bảo thêm thông style="font-family: FontAwesome;"tin đầu vào của mình.

Tôi làm điều này bằng cách thêm fa-placeholderlớp vào văn bản đầu vào:

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

vì vậy, trong css chỉ cần thêm cái này:

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

Nó hoạt động tốt cho tôi.

Cập nhật:

Để thay đổi phông chữ trong khi người dùng nhập văn bản của bạn, chỉ cần thêm phông chữ của bạn sau phông chữ tuyệt vời

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

Bất kỳ ai thắc mắc về cách triển khai Font Awesome 5 :

Không chỉ định họ phông chữ "Font Awesome 5" chung chung, bạn cần kết thúc cụ thể bằng nhánh biểu tượng mà bạn đang làm việc. Ở đây tôi đang sử dụng nhánh "Thương hiệu" chẳng hạn.

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

Chi tiết hơn Sử dụng biểu tượng Font Awesome (5) trong văn bản trình giữ chỗ đầu vào

Bỏ qua jQuery, điều này có thể được thực hiện bằng cách sử dụng ::placeholdermột phần tử đầu vào.

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

Phần 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] }

PHẦN TỐT NHẤT: Bạn có thể có họ phông chữ khác nhau cho trình giữ chỗ và văn bản

Tôi biết câu hỏi này nó rất cũ. Nhưng tôi không thấy câu trả lời nào đơn giản như tôi đã từng sử dụng.

Bạn chỉ cần thêm faslớp vào đầu vào và đặt một hex hợp lệ trong trường hợp này &#xf002cho glyph của Font-Awesome như ở đây<input type="text" class="fas" placeholder="&#xf002" />

Bạn có thể tìm thấy mã unicode của mỗi glyph trong trang web chính thức tại đây .

Đây là một ví dụ đơn giản, bạn không cần css hoặc 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>

Có một số độ trễ nhỏ và giật khi phông chữ thay đổi trong câu trả lời do Jason cung cấp. Sử dụng sự kiện "change" thay vì "keyup" sẽ giải quyết được vấn đề này.

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

Tôi đã thêm cả văn bản và biểu tượng cùng nhau trong một trình giữ chỗ.

placeholder="Edit   "

CSS:

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

Nếu bạn có thể / muốn sử dụng Bootstrap, giải pháp sẽ là các nhóm đầu vào:

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

Trông giống như thế này: đầu vào có thêm văn bản và ký hiệu tìm kiếm

Tôi đã giải quyết vấn đề hơi khác một chút và nó hoạt động với bất kỳ biểu tượng FA nào thông qua mã html. Thay vì tất cả những khó khăn này với trình giữ chỗ, giải pháp của tôi là:

1. Để đặt một biểu tượng theo cách thông thường

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. Sau đó, điều chỉnh văn bản của chỗ giữ chỗ (đó là văn bản cá nhân cho mọi người, trong trường hợp của tôi, một biểu tượng nằm ngay trước văn bản)

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

3. Đây là vấn đề mà một biểu tượng ở trên đầu vào của chúng tôi và chặn con trỏ nhấp vào, vì vậy chúng tôi nên thêm một dòng nữa trong CSS của mình

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

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

4. Nhưng một biểu tượng không biến mất cùng với trình giữ chỗ nên chúng tôi cần sửa nó. Và đây cũng là phiên bản cuối cùng của giải pháp của tôi:

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

Nó khó hơn tôi nghĩ trước đây, nhưng tôi hy vọng tôi đã giúp bất cứ ai trong việc này.

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

Giải pháp Teocci đơn giản nhất có thể, do đó, không cần thêm bất kỳ CSS nào, chỉ cần thêm class = "fas" cho Font Awesome 5, vì nó bổ sung khai báo phông chữ CSS thích hợp cho phần tử.

Đây là một ví dụ cho hộp tìm kiếm trong thanh điều hướng Bootstrap, với biểu tượng tìm kiếm được thêm vào cả nhóm đầu vào và trình giữ chỗ (tất nhiên, vì mục đích khử kiểm soát, không ai sẽ sử dụng cả hai cùng một lúc). Hình ảnh: https://i.imgur.com/v4kQJ77.png "> Mã:

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

Đôi khi trên hết câu trả lời là không đùa, khi bạn có thể sử dụng thủ thuật dưới đây

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