Потрясающе, тип ввода "отправить"

Кажется, что нет никакого класса для типа ввода '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?

Источник

8 ответов

Решение

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

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

для использования Font Awesome 3.2.0

<button type="submit" class="btn btn-success">
    <i class="icon-circle-arrow-right icon-large"></i> Next
</button>
Источник

HTML

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

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

я использую &#xf043; сущность здесь, которая соответствует U+F043, символу 'tint' Font Awesome.

CSS

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

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

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

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

Источник

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

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

вот ссылка на шпаргалку http://fortawesome.github.io/Font-Awesome/cheatsheet/

Источник

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

От W3C:

12.1 Псевдоэлементы:before и:after

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

Таким образом, у меня был проект, в котором я должен был отправить кнопки в виде 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 заставит действие click пройти этот контент.

Из Сети разработчиков Mozilla:

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

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

Источник

Вы можете использовать кнопки классов 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>
Источник

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

<button type="submit" class="icon-search icon-large"></button>
Источник

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

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

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

Источник

Скопируйте фактический символ в атрибуты значения отправки.

      <input type="submit" value="Send ➢ ➔ " class="btn btn-default" />
Источник
Другие вопросы по тегам