Як додати піктограму Font Awesome у поле введення?

Question 1

Як використовувати піктограму пошуку, включену в Font Awesome, для введення? На моєму сайті є функція пошуку (на основі PHPmotion), яку я хочу використовувати для пошуку.

Ось код:

<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

Ви можете використовувати інший тег замість inputі застосовувати FontAwesome звичайним способом.

замість вашого inputз типом imageви можете використовувати це:

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

швидкий CSS :

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

Ось коротка скрипка: DEMO

Ви можете стилізувати його трохи краще та додати функцію події до об’єкта i, що можна зробити, використовуючи <button type="submit">об’єкт замість iабо за допомогою JavaScript.

Рішення кнопки буде приблизно таким:

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

І CSS :

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

ось моя скрипка оновлена кнопкою замість i: DEMO

Оновлення: Використання FontAwesome для будь-якого тегу

Проблема FontAwsome полягає в тому, що його таблиця стилів використовує :beforeпсевдоелементи для додавання піктограм до елемента - і псевдоелементи не працюють / заборонені для inputелементів. Ось чому використання FontAwesome у звичайному режимі не буде працювати input.

Але є рішення - ви можете використовувати FontAwesome як звичайний шрифт приблизно так:

CSS:

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

HTML:

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

Гліфи можна передавати як значення valueатрибута. ASCII - коду для окремих букв / іконки можна знайти в CSS файл FontAwesome, потрібно просто змінити їх в ряд HTML ASCii , як \f002в і вона повинна працювати.

Посилання на код ascii FontAwesome ( шпаргалка ): fortawesome.github.io/Font-Awesome/cheatsheet

Розмір піктограм можна легко регулювати за допомогою font-size.

Див. inputНаведений вище приклад використання елемента в jsfidde:

ДЕМО

Оновлення: FontAwesome 5

З версією FontAwesome 5 змінився CSS, необхідний для цього рішення - змінилася назва родини шрифтів і повинна бути вказана вага шрифту:

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

Дивіться коментар @WillFastie із посиланням на оновлену скрипку нижче. Дякую!

Question 3

Ось рішення, яке працює із простим CSS та чудовим синтаксисом стандартних шрифтів, не потребуючи значень Unicode тощо.

Створіть <input>тег, за яким слід стандартний <i>тег із потрібним значком.
Використовуйте відносне позиціонування разом із порядком вищого шару (z-індекс) і переміщуйте піктограму над полем введення та поверх нього.
(Необов’язково) Ви можете зробити піктограму активною, щоб, можливо, надіслати дані, за допомогою стандартного JS.

Дивіться три фрагменти коду нижче для HTML / CSS / JS.

Або те саме в JSFiddle тут: Приклад: 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>

Розгорніть фрагмент

Question 4

Тим, хто задається питанням, як отримати піктограми FontAwesome для введення в Drupal, спочатку потрібно декодувати_ідентичності так:

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

Question 5

Змініть свій вхід на елемент кнопки, і ви зможете використовувати на ньому класи Font Awesome. Вирівнювання гліфа не є великим у демонстрації, але ви зрозуміли:

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

Перевага тут полягає в тому, що форма все ще повністю функціональна, без необхідності додавати обробники подій для елементів, які не є кнопками, але схожі на один.

Question 6

Подібно до верхньої відповіді, я використовував символ unicode у розділі value = HTML і називав FontAwesome як сімейство шрифтів для цього елемента введення. Єдине, що я додам, що верхня відповідь не охоплює, це те, що мій елемент значення також містив текст всередині нього після значка, зміна сімейства шрифтів на FontAwesome призвела до того, що звичайний текст виглядав погано. Рішенням було просто змінити CSS, щоб включити запасні шрифти:

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

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

Таким чином, FontAwesome захопить піктограму, але до всього тексту, що не є піктограмою, буде застосовано потрібний шрифт.

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

простий спосіб для нового чудового шрифту

  <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

Для роботи з Unicode або Fontawesome слід додати інтервал з класом, як показано нижче, оскільки вхідний тег не підтримує псевдокласи типу: after. це не пряме рішення

в html:

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

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

}