Font-awesome, тип ввода "отправить"

Кажется, нет класса для ввода типа "отправить" в font-awesome. Можно ли использовать какой-то класс из font-awesome для ввода кнопок? Я добавил значки ко всем кнопкам (которые на самом деле связаны с классом " btn "из twitter-bootstrap) в моих приложениях, но не могу добавить значки на "тип ввода".

или, как использовать этот код:

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: как сделать кнопку отправки с текстом + изображением в это?) С шрифт-удивительным?

170
font-awesome twitter-bootstrap twitter-bootstrap-rails

7 ответов

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

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

для шрифта Awesome 3.2.0 используйте

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

HTML-код

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

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

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

в CSS

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

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

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

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

72

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

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

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

46

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

С W3C по:

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

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

Итак, у меня был проект, где я должен был отправить кнопки в виде 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;
}

демо

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

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

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

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

11

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

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

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

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

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

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

0