Il ne semble pas y avoir de classe pour le type d'entrée «submit» dans font-awesome. Est-il possible d'utiliser une classe de font-awesome pour l'entrée de bouton? J'ai ajouté des icônes à tous les boutons (qui sont en fait liés à la classe «btn» de twitter-bootstrap) dans mes applications, mais je ne peux pas ajouter d'icônes sur «type d'entrée soumis».

Ou, comment utiliser ce code:

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>

(que j'ai pris de HTML: Comment faire un bouton d'envoi avec du texte + une image? ) avec une police impressionnante?

utilisez le type de bouton = "soumettre" au lieu de la saisie

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

pour l'utilisation de Font Awesome 3.2.0

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

HTML

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

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

J'utilise l' entité ici, ce qui correspond au U + F043, le symbole de «teinte» de Font Awesome.

CSS

Ensuite, nous devons le styliser pour utiliser la police:

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

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

Cependant, ce contrôle ne sera pas parfait au pixel près, vous devrez donc peut-être le modifier vous-même.

Vous pouvez utiliser la police géniale utf cheatsheet

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

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

Eh bien, techniquement, il n'est pas possible d'obtenir :beforeet les :afterpseudo-éléments fonctionnent sur les inputéléments

Depuis le W3C :

12.1 Les pseudo-éléments: avant et: après

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

J'ai donc eu un projet où j'avais des boutons de soumission sous forme de inputbalises et pour une raison quelconque, les autres développeurs m'ont restreint à utiliser des <button>balises au lieu des boutons de soumission d'entrée habituels, alors j'ai trouvé une autre solution, d'envelopper les boutons dans un spanensemble à position: relative;puis absolument positionner l'icône en utilisant :afterpseudo.

Remarque: Le violon de démonstration utilise le code de contenu de FontAwesome 3.2.1, vous devrez donc peut-être modifier la valeur de la contentproprié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;
}

Demo

Maintenant, ici, tout est explicite ici, à propos d'une propriété, c'est-à pointer-events: none;- dire que je l'ai utilisée parce que lorsque vous survolez le :aftercontenu généré par pseudo, votre bouton ne cliquera pas, donc l'utilisation de la valeur de noneforcera l'action de clic à passer à travers ce contenu .

De Mozilla Developer Network :

En plus d'indiquer que l'élément n'est pas la cible des événements de souris, la valeur none indique à l'événement de souris de passer "à travers" l'élément et de cibler tout ce qui est "en dessous" de cet élément à la place.

Survolez la police / l'icône du cœur Demoet voyez ce qui se passe si vous N'utilisez PASpointer-events: none;

Vous pouvez utiliser des classes de boutons btn-linket btn-xsavec type submit, ce qui fera un petit bouton invisible avec une icône à l'intérieur. 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 ça

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

Avec plusieurs soumissions, lorsque vous avez besoin de la valeur de la soumission sélectionnée, cela peut être fait assez facilement. Créez simplement un champ masqué dans votre formulaire et modifiez sa valeur en fonction du bouton sur lequel vous cliquez. Par exemple, dans le formulaire, 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>

Utilisation de jQuery:

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

Ensuite, vous pouvez récupérer la valeur du bouton cliqué dans la variable de publication "Cliqué"