Ответ 1

используйте кнопку type = "submit" вместо ввода

<button type="submit" class="btn btn-success">
    <i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>

для шрифта Awesome 3.2.0 use

<button type="submit" class="btn btn-success">
    <i class="icon-circle-arrow-right icon-large"></i> Next
</button>

Ответ 2

HTML

Так как элемент <input> отображает только значение атрибута value, мы должны манипулировать им только:

<input type="submit" class="btn fa-input" value="&#xf043; Input">

Я использую объект  здесь, что соответствует U + F043, символу шрифта Awesome шрифта.

CSS

Затем мы должны стилизовать его для использования шрифта:

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Что даст нам символ оттенка в шрифте Awesome, а другой текст в соответствующем шрифте.

Однако этот элемент управления не будет идеальным для пикселя, поэтому вам может потребоваться настроить его самостоятельно.

Ответ 3

Вы можете использовать шрифт awesome utf cheatsheet

<input type="submit" class="btn btn-success" value="&#xf011; Login"/>

вот ссылка для cheatsheet http://fortawesome.github.io/Font-Awesome/cheatsheet/

Ответ 4

Ну, технически невозможно получить :before и :after псевдоэлементы на элементах input

Из W3C:

12.1: перед и: после псевдоэлементов

Авторы определяют стиль и расположение сгенерированного контента с помощью: before и: после псевдоэлементов. Как показывают их имена,: before и: после псевдоэлементов укажите местоположение содержимого до и после содержимого дерева элементов. Контент' свойство в сочетании с этими псевдоэлементами указывает, что вставлены.

Итак, у меня был проект, в котором я подавал кнопки в виде тегов input, и по какой-то причине другие разработчики запретили мне использовать теги <button> вместо обычных кнопок ввода ввода, поэтому я придумал другой решение, обертывание кнопок внутри span, установленных на position: relative;, а затем абсолютно позиционирование значка с помощью :after псевдо.

Примечание. Демо-скрипт использует код содержимого для FontAwesome 3.2.1, поэтому вам может потребоваться изменить значение свойства content.

HTML

<span><input type="submit" value="Send" class="btn btn-default" /></span>

CSS

input[type="submit"] {
    margin: 10px;
    padding-right: 30px;
}

span {
    position: relative;
}

span:after {
    font-family: FontAwesome;
    content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
    font-size: 13px;
    position: absolute;
    right: 20px;
    top: 1px;
    pointer-events: none;
}

Демо

Теперь здесь все самоочевидно, об одном свойстве, т.е. pointer-events: none;, я использовал это, потому что при наведении указателя на :after псевдогенерированный контент ваша кнопка не будет нажимать, поэтому используйте значение none заставит действие клика пройти через это содержимое.

Из Mozilla Developer Network:

В дополнение к тому, что элемент не является объектом мыши события, значение none указывает, что событие мыши переходит "через" элемент и объект цели, находящийся под этим элементом.

Наведите на экран шрифт/значок сердца Демо и посмотрите, что произойдет, если вы НЕ используете pointer-events: none;

Ответ 5

Вы можете использовать классы кнопок btn-link и btn-xs с типом submit, который сделает небольшую невидимую кнопку со значком внутри нее. Пример:

<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>

Ответ 6

Также возможно, как это

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

Ответ 7

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

<input type="hidden" id="Clicked" name="Clicked" value="" />
<button type="submit" class="btn btn-success ClickCheck" id="Create"> <i class="fa fa-file-pdf-o"> Create Bill</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="Reset"> <i class="fa fa-times"> Reset</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="StoreData"> <i class="fa fa-archive"> Save</i></button>

Использование jQuery:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.ClickCheck').click(function()
        {
            var ButtonID = $(this).attr('id');
            $('#Clicked').val(ButtonID);
        });
    });
</script>

Затем вы можете получить значение кнопки, нажатой в переменной post "Clicked"