web-dev-qa-db-fra.com

Font-awesome, le type d'entrée 'submit'

Il semble n'y avoir aucune classe pour le type d'entrée 'submit' dans font-awesome. Est-il possible d'utiliser une classe de font-awesome pour la saisie par 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 le 'type de saisie'. 

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>

(extrait de HTML: Comment créer un bouton de soumission avec du texte et une image? ) avec une police géniale?

twitter-bootstraptwitter-bootstrap-railsfont-awesome
180
denis.peplin

utilisez le type de bouton = "submit" 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 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>
304
Joao Leme

HTML

Étant donné que l'élément <input> n'affiche que la valeur de l'attribut value, nous devons le manipuler uniquement:

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

J'utilise ici l'entité &#xf043;, qui correspond au U + F043, le symbole de "teinte" de Font Awesome.

CSS

Ensuite, nous devons le styler 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, vous devrez donc peut-être le modifier vous-même.

77
Pavlo

Vous pouvez utiliser la police géniale Utf Cheatsheet 

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

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

48
Bernard Nongpoh

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

De 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 les pseudo-éléments: before et: after. Comme leurs noms l'indiquent, les pseudo-éléments: before et: after 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', associée à ces pseudo-éléments, spécifie ce qui est inséré.

J'ai donc eu un projet dans lequel j'avais des boutons de soumission sous la forme de balises input et, pour une raison quelconque, les autres développeurs m'ont interdit d'utiliser les balises <button> au lieu des boutons de soumission d'entrée habituels. J'ai donc proposé une autre solution, consistant à envelopper les boutons à l'intérieur. un span défini sur position: relative; et positionnant ensuite absolument l'icône à l'aide de :after pseudo.

Remarque: Le violon de démonstration utilise le code de contenu de FontAwesome 3.2.1. Il peut donc être nécessaire de modifier la valeur de la propriété content 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-à-dire pointer-events: none;, parce que lorsque vous passez la souris sur le pseudo-contenu généré par :after, votre bouton ne cliquera pas. L'utilisation de la valeur none force alors l'action de clic à travers ce contenu.

De Mozilla Developer Network :

En plus d'indiquer que l'élément n'est pas la cible d'événements de souris, la valeur none indique à l'événement de souris de "parcourir" l'élément et de cibler tout ce qui se trouve "sous" cet élément.

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

12
Mr. Alien

Vous pouvez utiliser les classes de boutons btn-link et btn-xs avec le 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>
8
Derp

Aussi possible comme ça 

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

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 caché dans votre formulaire et changez sa valeur en fonction du bouton sur lequel vous avez cliqué. Par exemple, dans le formulaire, supposons 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é"

0
RationalRabbit