Font-awesome, type d’entrée ‘submit’

Il semble ne 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 la saisie de bouton? J’ai ajouté des icons à tous les boutons (qui sont en fait liés à la classe ‘btn’ de twitter-bootstrap) dans mes applications, mais je ne peux pas append d’icons sur ‘input type submit’.

Ou comment utiliser ce code:

input#image-button{ background: #ccc url('icon.png') no-repeat top left; padding-left: 16px; height: 16px; } 

html:

 Text 

(que j’ai pris à partir de HTML: Comment créer un bouton de soumission avec du texte + de l’image? ) avec font-awesome?

utilisez le bouton type = “submit” au lieu de input

  

pour l’utilisation de Font Awesome 3.2.0

  

HTML

L’élément affichant uniquement l’atsortingbut value of value, nous ne devons le manipuler que:

  

J’utilise entité ici, qui correspond au symbole U + F043, la teinte de la police 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 la teinte dans Font Awesome et l’autre texte dans la police appropriée.

Cependant, ce contrôle ne sera pas parfait, vous devrez donc le modifier vous-même.

Vous pouvez utiliser la police awesome utf cheatsheet

  

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

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

Du 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’arbre de document d’un élément. La propriété ‘content’, conjointement avec ces pseudo-éléments, spécifie ce qui est inséré.


J’avais donc un projet dans lequel j’avais des boutons de soumission sous la forme de balises de input et pour une raison quelconque, les autres développeurs me restreignaient à utiliser des balises au lieu des boutons de soumission habituels. les boutons à l’intérieur d’une span réglés sur position: relative; puis positionner absolument l’icône en utilisant :after pseudo.

Remarque: Le violon de démonstration utilise le code de contenu de FontAwesome 3.2.1. Vous devrez peut-être modifier la valeur de content propriété content conséquence.

HTML

  

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 pointer-events: none; dire pointer-events: none; J’ai utilisé cela parce que :after survolez le :after pseudo contenu généré, votre bouton ne cliquera pas. L’utilisation de la valeur none empêchera l’action de clic de passer par ce contenu.

De Mozilla Developer Network :

En plus d’indiquer que l’élément n’est pas la cible des événements de la souris, la valeur none indique à l’événement mouse de passer “par” l’élément et de cibler ce qui est “dessous” de cet élément.

Survolez la police / icône de coeur Demo et voyez ce qui se passe si vous n’utilisez PAS les pointer-events: none;

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

  

Aussi possible comme ça

  

Avec plusieurs soumissions, lorsque vous avez besoin de la valeur de l’envoi sélectionné, cela peut se faire assez facilement. Créez simplement un champ caché dans votre formulaire et modifiez sa valeur en fonction du bouton sur lequel vous cliquez. Par exemple, dans le formulaire, dites que vous avez:

     

Utiliser jQuery:

  

Ensuite, vous pouvez récupérer la valeur du bouton cliqué dans la variable “Clicked”