Кажется, что нет никакого класса для типа ввода 'submit' в font-awesome. Можно ли использовать какой-нибудь класс из font-awesome для ввода с кнопки? Я добавил значки ко всем кнопкам (которые на самом деле связаны с классом «btn» из twitter-bootstrap) в моих приложениях, но не могу добавить значки к «типу ввода submit».
Или, как использовать этот код:
input#image-button{
background: #ccc url('icon.png') no-repeat top left;
padding-left: 16px;
height: 16px;
}
HTML:
<input type="submit" id="image-button">Text</input>
(который я взял из HTML: как сделать кнопку отправки с текстом + изображением в нем? ) с font-awesome?
twitter-bootstrap
twitter-bootstrap-rails
font-awesome
denis.peplin
источник
источник
<button type=submit>
и<input type=submit>
: stackoverflow.com/questions/3543615/…<button type="submit">
работает в любой форме?HTML
Поскольку
<input>
элемент отображает только значение атрибута value, мы должны манипулировать только им:Я использую

здесь сущность, которая соответствует U + F043, символу 'tint' Font Awesome.CSS
Затем мы должны стилизовать его, чтобы использовать шрифт:
Что даст нам оттенок символа в Font Awesome и другой текст в соответствующем шрифте.
Однако этот элемент управления не будет идеальным по пикселям, поэтому вам, возможно, придется настроить его самостоятельно.
источник
<input>
sw / o иконку.font-family
свойство встроенного стиля, чтобы использовать его в любых элементах HTML, имеющих текстовое содержимое.Вы можете использовать шрифт awesome utf cheatsheet
вот ссылка на чит-лист http://fortawesome.github.io/Font-Awesome/cheatsheet/
источник
<input type="button" class="fa" value=" Login"/>
без начальной загрузки используйте класс fa, чтобы заставить его работать$("input.search").addClass("fa").val("\uf011 Login");
Ну, технически невозможно получить
:before
и:after
псевдоэлементы работают наinput
элементахОт W3C :
Таким образом, у меня был проект, в котором у меня были кнопки отправки в виде
input
тегов, и по какой-то причине другие разработчики запретили мне использовать<button>
теги вместо обычных кнопок ввода ввода, поэтому я предложил другое решение - заключить кнопки вspan
набор чтобыposition: relative;
затем абсолютное позиционирование значка , используя:after
псевдо.HTML
CSS
Demo
Теперь здесь все говорит само за себя, об одном свойстве, т.
pointer-events: none;
Е. Я использовал это, потому что при наведении курсора на:after
псевдо-сгенерированный контент ваша кнопка не будет щелкать, поэтому использование значенияnone
заставит действие click пройти этот контент. ,Из Сети разработчиков Mozilla :
Наведите курсор на шрифт / значок сердца
Demoи посмотрите, что произойдет, если вы не используетеpointer-events: none;
источник
Вы можете использовать кнопки классов
btn-link
иbtn-xs
с типомsubmit
, который сделает маленькую невидимую кнопку со значком внутри нее. Пример:источник
Также возможно, как это
источник
С несколькими отправками, когда вам нужно выбрать значение отправки, это можно сделать довольно легко. Просто создайте скрытое поле в вашей форме и измените его значение в зависимости от того, какая кнопка нажата. Например, в форме, скажем, у вас есть:
Используя jQuery:
Затем вы можете получить значение кнопки, нажатой в переменной поста «Клик»
источник