Вы можете использовать другой тег вместо input
и применить FontAwesome обычным способом.
вместо вашего input
типа with image
вы можете использовать это:
<i class="icon-search icon-2x"></i>
быстрый CSS :
.icon-search {
color:white;
background-color:black;
}
Вот быстрая скрипка:
ДЕМО
Вы можете стилизовать его немного лучше и добавить функциональность событий к объекту 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="" />
Глифы могут передаваться как значения 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";
font-size: 1.3333333333333333em;
font-weight: 900;
}
См. Комментарий @WillFastie со ссылкой на обновленную скрипку ниже. Благодарность!
:before
и, следовательно, не будет работать с тегамиinput
orimg
... но есть простое решение, а именно использование FontAwesome в качестве обычного шрифта ... см. Мое обновленное решение над. Надеюсь, яВот решение, которое работает с простым синтаксисом 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>
источник
Для тех, кто задается вопросом, как получить значки FontAwesome на вводе drupal, вы должны сначала decode_entities следующим образом:
$form['submit'] = array( '#type' => 'submit', '#value' => decode_entities(''), // code for FontAwesome trash icon // etc. );
источник
Измените свой ввод на элемент кнопки, и вы сможете использовать на нем классы 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; }
Преимущество здесь в том, что форма по-прежнему полностью функциональна без добавления обработчиков событий для элементов, которые не являются кнопками, но выглядят как они.
источник
Как и в верхнем ответе, я использовал символ 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 захватит значок, но для всего текста, не являющегося значком, будет применен желаемый шрифт.
источник
.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>
источник
простой способ для нового шрифта
<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>
источник
чтобы работать с unicode или fontawesome, вы должны добавить диапазон с классом, как показано ниже, потому что тег input не поддерживает псевдоклассы, такие как: 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; }
источник