HTML

puisque l'élément <input> n'affiche que la valeur de l'attribut valeur, nous devons le manipuler seulement:

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

j'utilise l'entité  ici, qui correspond au U+F043, le symbole "teinte" de Font Awesome.

CSS

ensuite, nous devons le style pour utiliser la police:

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

qui nous donnera le symbole de teinte dans la police impressionnant et l'autre le texte dans la police appropriée.

cependant, ce contrôle ne sera pas parfait en pixel, vous devrez peut-être le modifier vous-même.

, Vous pouvez utiliser la police génial utf triche

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

voici le lien de la triche http://fortawesome.github.io/Font-Awesome/cheatsheet /

Eh bien, techniquement il n'est pas possible d'obtenir :before et :after pseudo éléments travail sur input éléments

de W3C :

12.1 Le :before et :after pseudo-éléments

les auteurs spécifient le style et l'emplacement du contenu généré avec le :avant et: après les pseudo-éléments. Comme leurs noms l'indiquent, la : avant et: après pseudo-éléments spécifient l'emplacement du contenu avant et après le contenu de l'arborescence d'un élément. Le "contenu" bien, en conjonction avec ces pseudo-éléments, spécifie ce qui est insérer.

"donc j'ai eu un projet où j'avais soumettre des boutons sous la forme de input tags et pour une raison quelconque les autres développeurs m'a limité à utiliser <button> tags au lieu de l'entrée habituelle soumettre des boutons, donc je suis venu avec une autre solution, d'envelopper les boutons à l'intérieur d'un span réglé sur position: relative; et ensuite absolument positionner l'icône en utilisant :after pseudo.

Note: le violon de démonstration utilise le code de contenu pour FontAwesome 3.2.1 so vous devrez peut-être modifier la valeur de content propriété en conséquence.

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

Démo

maintenant ici tout est explicite ici, à propos d'une propriété I. e pointer-events: none; , j'ai utilisé cela parce que sur le vol stationnaire au-dessus du :after contenu pseudo généré, votre bouton ne cliquera pas, donc en utilisant la valeur de none forcera l'action de clic pour passer par ce contenu.

de Mozilla Developer Network :

En outre à indiquer que l'élément n'est pas la cible de la souris events, la valeur none indique à l'événement de la souris d'aller "à travers" le élément et cible ce qui est "en dessous" de cet élément à la place.

Passez le cœur de police/icône Démo et voir ce qui se passe si vous n'utilisez pas pointer-events: none;

vous pouvez utiliser les classes de boutons btn-link et btn-xs avec le type submit , qui fera un petit bouton invisible avec une icône à l'intérieur de celui-ci. Exemple:

<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>

aussi possible comme ceci

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

avec multiple submits, lorsque vous avez besoin de la valeur de la soumission sélectionnée, cela peut être fait assez facilement. Il suffit de créer un champ caché dans votre forme et de changer sa valeur en fonction de ce bouton est cliqué. Par exemple, dans la forme, dites que vous avez:

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

utilisant jQuery:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.ClickCheck').click(function()
        {
            var ButtonID = $(this).attr('id');
            $('#Clicked').val(ButtonID);
        });
    });
</script>

alors vous pouvez récupérer la valeur du bouton cliqué dans la variable" post cliqué