Làm cách nào để thêm biểu tượng Font Awesome vào trường nhập?

Question 1

Làm cách nào để sử dụng biểu tượng tìm kiếm có trong Font Awesome để nhập liệu? Tôi có một tính năng tìm kiếm trên trang web của mình (dựa trên PHPmotion), mà tôi muốn sử dụng để tìm kiếm.

Đây là mã:

<div id="search-bar">

      <form method="get" action="search.php" autocomplete="off" name="form_search">
        <input type="hidden" name="type" value="videos" />
            <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
            'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
            font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
            #ffffff" />
            <input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
        <div id="searchBoxSuggestions"></div>
        </form>
        </div>

Question 2

Bạn có thể sử dụng thẻ khác thay thế inputvà áp dụng FontAwesome theo cách bình thường.

thay vì của bạn inputvới loại, imagebạn có thể sử dụng cái này:

<i class="icon-search icon-2x"></i>

CSS nhanh :

.icon-search {
    color:white;
    background-color:black;
}

Đây là một trò chơi nhanh: DEMO

Bạn có thể tạo kiểu cho nó tốt hơn một chút và thêm chức năng sự kiện vào đối tượng i, bạn có thể làm điều này bằng cách sử dụng một <button type="submit">đối tượng thay vì ihoặc bằng javascript.

Nút sollution sẽ giống như sau:

<button type="submit" class="icon-search icon-large"></button>

Và CSS :

.icon-search {
    height:32px;
    width:32px;
    border: none;
    cursor: pointer;
    color:white;
    background-color:black;
    position:relative;
}

đây là trò chơi của tôi được cập nhật bằng nút thay vì i: DEMO

Cập nhật: Sử dụng FontAwesome trên bất kỳ thẻ nào

Vấn đề với FontAwsome là biểu định kiểu của nó sử dụng :beforecác phần tử giả để thêm các biểu tượng vào một phần tử - và các phần tử giả không hoạt động / không được phép trên inputcác phần tử. Đây là lý do tại sao sử dụng FontAwesome theo cách thông thường sẽ không hoạt động input.

Nhưng có một giải pháp - bạn có thể sử dụng FontAwesome như một phông chữ thông thường như sau:

CSS:

input[type="submit"] {
    font-family: FontAwesome;
}

HTML:

<input type="submit" class="search" value="&#xf002;" />

Các glyph có thể được chuyển dưới dạng giá trị của valuethuộc tính. Các mã ascii cho các chữ cái cá nhân / các biểu tượng có thể được tìm thấy trong file css FontAwesome, bạn chỉ cần thay đổi chúng thành một số HTML ascii như \f002để và nó sẽ làm việc.

Liên kết tới mã ascii FontAwesome ( cheatsheet ): fortawesome.github.io/Font-Awesome/cheatsheet

Kích thước của các biểu tượng có thể dễ dàng điều chỉnh thông qua font-size.

Xem ví dụ trên bằng cách sử dụng một inputphần tử trong jsfidde:

BẢN GIỚI THIỆU

Cập nhật: FontAwesome 5

Với FontAwesome phiên bản 5, CSS yêu cầu cho giải pháp này đã thay đổi - tên họ phông chữ đã thay đổi và trọng lượng phông chữ phải được chỉ định:

input[type="submit"] {
    font-family: "Font Awesome 5 Free"; // for the open access version
    font-size: 1.3333333333333333em;
    font-weight: 900;
}

Xem bình luận của @WillFastie với liên kết đến phần dưới của fiddle được cập nhật. Cảm ơn!

Question 3

Đây là một giải pháp hoạt động với CSS đơn giản và cú pháp tuyệt vời phông chữ chuẩn, không cần giá trị unicode, v.v.

Tạo <input>thẻ theo sau là <i>thẻ chuẩn có biểu tượng bạn cần.
Sử dụng định vị tương đối cùng với thứ tự lớp cao hơn (chỉ số z) và di chuyển biểu tượng lên trên và trên đầu trường nhập liệu.
(Tùy chọn) Bạn có thể kích hoạt biểu tượng, để có thể gửi dữ liệu, thông qua JS chuẩn.

Xem ba đoạn mã dưới đây để biết HTML / CSS / JS.

Hoặc tương tự trong JSFiddle tại đây: Ví dụ: http://jsfiddle.net/ethanpil/ws1g27y3/

$('#filtersubmit').click(function() {
  alert('Searching for ' + $('#filter').val());
});

#filtersubmit {
  position: relative;
  z-index: 1;
  left: -25px;
  top: 1px;
  color: #7B7B7B;
  cursor: pointer;
  width: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>

Mở rộng đoạn mã

Question 4

Đối với những người đang tự hỏi làm thế nào để có được các biểu tượng FontAwesome vào đầu vào drupal, trước tiên bạn phải decode_entities như sau:

$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities('&#xf014;'), // code for FontAwesome trash icon
// etc.
);

Question 5

Thay đổi đầu vào của bạn thành một phần tử nút và bạn có thể sử dụng các lớp Font Awesome trên đó. Căn chỉnh của glyph không tuyệt vời trong bản demo, nhưng bạn có ý tưởng:

http://tinker.io/802b6/1

<div id="search-bar">
  <form method="get" action="search.php" autocomplete="off" name="form_search">
    <input type="hidden" name="type" value="videos" />
        <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
        'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
        font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color:
        #ffffff" /><!--
        --><button class="icon-search">Search</button>
    <div id="searchBoxSuggestions"></div>
    </form>
</div>

#search-bar .icon-search {
    width: 30px;
    height: 30px;
    background: black;
    color: white;
    border: none;
    overflow: hidden;
    vertical-align: middle;
    padding: 0;
}

#search-bar .icon-search:before {
    display: inline-block;
    width: 30px;
    height: 30px;
}

Ưu điểm ở đây là biểu mẫu vẫn có đầy đủ chức năng mà không cần phải thêm trình xử lý sự kiện cho các phần tử không phải là nút nhưng trông giống như một.

Question 6

Tương tự như câu trả lời trên cùng, tôi đã sử dụng ký tự unicode trong phần value = của HTML và gọi FontAwesome làm họ phông chữ trên phần tử đầu vào đó. Điều duy nhất tôi sẽ thêm rằng câu trả lời trên cùng không bao gồm bởi vì phần tử giá trị của tôi cũng có văn bản bên trong nó sau biểu tượng, việc thay đổi họ phông chữ thành FontAwesome đã làm cho văn bản thông thường trông xấu. Giải pháp đơn giản là thay đổi CSS để bao gồm các phông chữ dự phòng:

<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">

font-family: FontAwesome, Roboto, sans-serif;

Bằng cách này, FontAwesome sẽ lấy biểu tượng, nhưng tất cả văn bản không phải biểu tượng sẽ có phông chữ mong muốn được áp dụng.

Question 7

.fa-file-o {
    position: absolute;
    left: 50px;
    top: 15px;
    color: #ffffff
}

<div>
 <span class="fa fa-file-o"></span>
 <input type="button" name="" value="IMPORT FILE"/>
</div>

Question 8

cách đơn giản cho phông chữ mới tuyệt vời

  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="txtSearch"  >
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
                    </div>
                </div>

Question 9

để làm việc này với unicode hoặc fontawesome, bạn nên thêm khoảng cách với lớp như bên dưới, vì thẻ đầu vào không hỗ trợ các lớp giả như: sau. đây không phải là một giải pháp trực tiếp

trong html:

   <span class="button1 search"></span>
<input name="username">

trong css:

.button1 {
    background-color: #B9D5AD;
    border-radius: 0.2em 0 0 0.2em;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); 
    pointer-events: none;
    margin:1px 12px;    
    border-radius: 0.2em;    
    color: #333333;
    cursor: pointer;
    position: absolute;
    padding: 3px;
    text-decoration: none;   

}