Impressionnant, type d'entrée «soumettre»


205

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?

Réponses:


345

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>

Impressionnant! Fonctionne comme prévu. Il faut encore quelques étapes pour l'adapter à simple_form ou créer un assistant, mais c'est relativement facile.
denis.peplin

19
Soyez également conscient des différences entre <button type=submit>et <input type=submit>: stackoverflow.com/questions/3543615/…
Pavlo

@ stanislav-mayorov cela fonctionne. Si vous utilisez la version 4.7 actuelle, vous devez ajuster à partir de 3.2.0 (à partir de 2012). Essayez la réponse mise à jour.
Joao Leme

@JoaoLeme <button type="submit">fonctionne sous n'importe quelle forme?
Ryuujo

Cela ne fonctionne pas lorsque je veux éviter de recharger la page.
Salvioner

87

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' &#xf043;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.


1
Merci pour la réponse, cela fonctionne, mais je ne peux pas réellement utiliser cette approche, car la police affecte le texte de la valeur entière. J'utilise également 'icon-large' dans d'autres boutons ... Pour ceux qui vont essayer, les codes de police sont ici: github.com/FortAwesome/Font-Awesome/blob/master/sass/…
denis.peplin

Je pense que c'est tout ce que nous pouvons faire ici. Personnellement, je vous suggère de laisser <input>sw / o une icône.
Pavlo

a bien fonctionné, je dois utiliser <input type = "submit"> parce que j'ai deux soumissions sous une seule forme
MuniR

c'est mieux que d'ajouter "fa" à la classe de l'élément, car "fa" changera la hauteur de l'élément.
Siwei Shen

Vous pouvez également utiliser la font-familypropriété de style en ligne pour l'utiliser dans tous les éléments HTML ayant du contenu textuel.
SaidbakR

54

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/


2
Cela a fait ma journée! Merci .. Pour tous les autres utilisateurs, veuillez noter la phrase: copiez et collez les icônes ( pas l'unicode ) directement à partir de cette page dans votre conception, c'est-à-dire copiez l'icône réelle et cela fonctionnera
PSR

17
<input type="button" class="fa" value="&#xf011; Login"/>sans bootstrap, utilisez la classe fa pour le faire fonctionner
StackHola

2
Si vous essayez de régler cela avec javascript ou jQuery, utilisez la variante unicode:$("input.search").addClass("fa").val("\uf011 Login");
Jamie Chong

2
Même avec Bootstrap, je dois ajouter class = "fa" pour que cela fonctionne.
denis.peplin

12

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;


1
Bien qu'il s'agisse d'une solution très intéressante, elle présente un gros inconvénient: les événements de pointeur: aucun n'est pris en charge par IE <11 ( caniuse.com/#feat=pointer-events ). La raison étant que la propriété pointer-events a été créée pour les éléments SVG (graphiques vectoriels) et qu'elle n'est pas techniquement dans les spécifications du W3C pour les autres éléments HTML (pourtant, wiki.csswg.org/spec/css4-ui#pointer-events ) même si tous les navigateurs modernes sauf IE <11 le supportent.
CaspianRoach

9

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>

5

Aussi possible comme ça

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

1

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.