Шрифт потрясающий, тип ввода «отправить»

StackOverflow https://stackoverflow.com//questions/11686007

Вопрос

Кажется, в шрифте нет класса для типа ввода «отправить».Можно ли использовать какой-нибудь класс из 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:Как сделать кнопку отправки с текстом и изображением?) с потрясающим шрифтом?

Это было полезно?

Решение

Используйте тип кнопки= «Отправить» вместо ввода 

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

Другие советы

HTML

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

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

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

CSS

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

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

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

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

Вы можете использовать шрифт Awesome UTF Chechsheet 

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

Вот ссылка для чтета http://fortawesome.github.io/font-awesome/cheatsheet/ P >.

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

От W3C:

12.1 Псевдоэлементы :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;
}

Демо

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

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

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

Наведите курсор на шрифт/значок сердца Демо и посмотрите, что произойдет, если вы НЕ будете использовать 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>
.

Тогда вы можете получить значение кнопки, щелкнувшись на переменме сообщения «Нажатие»

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top