Как добавить значок Font Awesome в поле ввода?

Ответ 1

Вы можете использовать другой тег вместо 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 для отдельных букв/значков можно найти в файле FontAwesome css, вам просто нужно изменить их на номер HTML ascii, например от \f002 до , и он должен работать.

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

Размер значков можно легко настроить с помощью font-size.

Смотрите приведенный выше пример использования элемента input в jsfidde:

DEMO

Обновление: 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 со ссылкой на обновленную скрипку ниже. Спасибо!

Ответ 2

Вот решение, которое работает с простым CSS и стандартным шрифтом, удивительным синтаксисом, без необходимости в значениях unicode и т.д.

• Создайте тег <input>, за которым следует стандартный тег <i> с нужным значком.

• Используйте относительное позиционирование вместе с порядком более высокого уровня (z-index) и переместите значок поверх и над полем ввода.

• (Необязательно) Вы можете сделать значок активным, возможно, представить данные через стандартный 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>

Ответ 3

Для тех, кто задается вопросом, как получить значки FontAwesome для входа drupal, вы должны сначала decode_entities следующим образом:

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

Ответ 4

Измените свой вход на элемент кнопки, и вы можете использовать классы шрифта 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;
}

Преимущество в том, что форма по-прежнему полностью работоспособна, не добавляя обработчики событий для элементов, которые не являются кнопками, но выглядят как один.

Ответ 5

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

Ответ 6

Как и в верхнем ответе, я использовал символ Юникод в разделе 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 будет захватывать значок, но ко всему не-значковому тексту будет применен нужный шрифт.

Ответ 7

чтобы работать с помощью unicode или fontawesome, вы должны добавить span с классом, как показано ниже, потому что тег ввода не поддерживает псевдоклассы вроде: 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;   

}