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

205

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

denis.peplin
источник

Ответы:

345

используйте кнопку 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>
Жоао Леме
источник
Потрясающие! Работает как положено. Еще нужно несколько шагов, чтобы адаптировать это для simple_form или создать помощника, но это относительно просто.
denis.peplin
19
Также следует помнить о различиях между <button type=submit>и <input type=submit>: stackoverflow.com/questions/3543615/…
Павло
@ Станислав-Майоров это работает. Если вы используете текущую версию 4.7, вы должны настроить с 3.2.0 (с 2012 года). Попробуйте обновленный ответ.
Жоао Леме
@JoaoLeme <button type="submit">работает в любой форме?
Ryuujo
Это не работает, когда я хочу избежать перезагрузки страницы.
Salvioner
87

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 и другой текст в соответствующем шрифте.

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

Павло
источник
1
Спасибо за ответ, он работает, но я не могу использовать этот подход, потому что шрифт влияет на весь текст значения. Я также использую 'icon-large' в других кнопках ... Для тех, кто попробует это, коды шрифтов здесь: github.com/FortAwesome/Font-Awesome/blob/master/sass/…
denis.peplin
Я думаю, что это все, что мы можем сделать здесь. Лично я предлагаю вам оставить <input>sw / o иконку.
Павл
работал нормально, я должен использовать <input type = "submit">, потому что у меня есть два представления в одной форме
MuniR
это лучше, чем добавлять "fa" в класс элемента, так как "fa" изменит высоту элемента.
Сивей Шен 申思维
Также вы можете использовать font-familyсвойство встроенного стиля, чтобы использовать его в любых элементах HTML, имеющих текстовое содержимое.
SaidbakR
54

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

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

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

Бернард Нонгпох
источник
2
Это сделало мой день! Спасибо .. Для других пользователей, пожалуйста, обратите внимание на предложение: скопируйте и вставьте значки ( не Unicode ) прямо с этой страницы в ваш дизайн, т.е. скопируйте фактическую иконку, и она будет работать
PSR
17
<input type="button" class="fa" value="&#xf011; Login"/>без начальной загрузки используйте класс fa, чтобы заставить его работать
StackHola
2
Если вы пытаетесь установить это с помощью javascript или jQuery, используйте вариант Unicode:$("input.search").addClass("fa").val("\uf011 Login");
Jamie Chong
2
Даже с Bootstrap мне нужно добавить class = "fa", чтобы это работало.
denis.peplin
12

Ну, технически невозможно получить :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;
}

Demo

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

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

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

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

Мистер инопланетянин
источник
1
Хотя это очень классное решение, оно имеет один большой недостаток: указатель-события: ни один не поддерживается IE <11 ( caniuse.com/#feat=pointer-events ). Причина в том, что свойство указателя-событий было создано для элементов SVG (векторная графика), и технически оно не указано в спецификации W3C для других элементов HTML (хотя wiki.csswg.org/spec/css4-ui#pointer-events ), хотя все современные браузеры, кроме IE <11, поддерживают его.
CaspianRoach
9

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

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

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

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

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

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

RationalRabbit
источник