Police géniale, type d'entrée « soumettre »

Question

Il ne semble pas y avoir de classe pour le type d'entrée « soumettre » dans font-awesome.Est-il possible d'utiliser une classe de font-awesome pour la saisie des boutons ?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 « soumission de type d'entrée ».

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 créer un bouton de soumission contenant du texte et une image ?) avec font-awesome ?

Answer 1

bouton d'utilisation Type="Soumettre" au lieu de l'entrée

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

Pour Font Font génial 3.2.0 Utilisez

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

Answer 2

HTML

Depuis <input> L'élément affiche uniquement la valeur de l'attribut value, nous devons le manipuler uniquement :

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

j'utilise  entité ici, qui correspond au U+F043, le symbole « 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.

Answer 3

Vous pouvez utiliser FONTSOME UTF CheatheheheheSheet

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

Voici le lien pour la feuille de chiche http://frezwesome.github.io/font-awesome/cheatheiche/

Answer 4

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

Depuis W3C:

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

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

---

J'avais donc un projet où je devais soumettre des boutons sous forme de input balises et pour une raison quelconque, les autres développeurs m'ont restreint l'utilisation <button> balises au lieu des boutons de soumission d'entrée habituels, j'ai donc trouvé une autre solution, consistant à envelopper les boutons dans un span mis à position: relative; puis positionner absolument l'icône en utilisant :after pseudo.

Note:Le violon de démon 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é, c'est-à-dire pointer-events: none;, je l'ai utilisé parce qu'en survolant le :after contenu pseudo-généré, votre bouton ne cliquera pas, donc en utilisant la valeur de none forcera l'action de clic à passer par ce contenu.

Depuis Réseau de développeurs Mozilla :

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

Survolez la police/l'icône du cœur Démo et voyez ce qui se passe si vous N'utilisez PAS pointer-events: none;

Answer 5

Vous pouvez utiliser des classes de boutons btn-link et btn-xs avec type submit, ce qui créera 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>

Answer 6

aussi possible comme celle-ci

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

Answer 7

avec plusieurs soumissions, lorsque vous avez besoin de la valeur de la soumission sélectionnée, cela peut être effectué assez facilement.Il suffit de créer un champ masqué dans votre formulaire et de modifier sa valeur en fonction du bouton cliqué sur le bouton.Par exemple, sous la forme, disons 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>

Utiliser jQuery:

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

Ensuite, vous pouvez extraire la valeur du bouton cliqué dans la variable de poteau "cliquée"