Здається, немає класу для типу введення 'submit' у шрифтовому плані. Чи можна використовувати якийсь клас із шрифтового дивовижного для введення кнопок? Я додав піктограми до всіх кнопок (які насправді посилаються на клас '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: Як зробити кнопку з текстом + зображенням уявити в ньому? ) З шрифтом дивним?

використання кнопки 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

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

HTML

Оскільки <input>елемент відображає лише значення атрибута значення, ми маніпулюємо лише ним:

<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 та інший текст відповідним шрифтом.

Однак цей елемент управління не буде ідеальним для пікселів, тому вам, можливо, доведеться налаштувати його самостійно.

Ви можете використовувати дивовижний шрифт utf

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

ось посилання на шпаргалку http://fortawesome.github.io/Font-Awesome/cheatsheet/

Ну, технічно неможливо отримати, :beforeа :afterпсевдоелементи працюють над inputелементами

Від W3C :

12.1 Псевдоелементи: до і після

Автори визначають стиль та розташування створеного контенту за допомогою: перед та: після псевдоелементів. Як вказують їх назви, псевдоелементи: до та: після вказують розташування вмісту до та після вмісту дерева документа. Властивість "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сила" змусить дію клацання пройти через цей вміст .

Від мережі розробників Mozilla :

Крім вказівки на те, що елемент не є ціллю подій миші, значення жодне не вказує події миші пройти "через" елемент і націлити все, що знаходиться "під ним".

Наведіть курсор / піктограму серця Demoі подивіться, що станеться, якщо ви НЕ використовуєте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>

Потім ви можете отримати значення кнопки, натиснутої в змінній публікації "Клацання"