Polices-awesome, d’entrée de type ' soumettre '

Question

Il semble pas de classe pour le type d'entrée "soumettre" à font-awesome. Est-il possible d'utiliser un peu de classe de la police-génial pour la touche entrée? J'ai ajouté des icônes pour tous les boutons (qui fait des liens avec la classe btn "de twitter bootstrap) dans mes applications, mais ne peut pas ajouter des icônes sur l'input de 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:

<input type="submit" id="image-button">Text</input>

(que j'ai pris d' HTML: Comment faire un bouton avec texte + image?) avec font-awesome?

Answer 1

Utilisez le bouton type = « submit » au lieu d’entrée

Answer 2

HTML

Depuis <input> élément affiche uniquement la valeur de l'attribut value, nous avons à manipuler uniquement:

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

Je suis à l'aide d'  entité ici, ce qui correspond à U+F043, la Police Génial 'teinte' symbole.

CSS

Ensuite, nous avons pour le style à utiliser la police:

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

Ce qui va nous donner la teinte symbole dans la Police Génial et l'autre texte dans la police appropriée.

Toutefois, ce contrôle ne sera pas de pixel-perfect, de sorte que vous pourriez avoir à modifier par vous-même.

Answer 3

Vous pouvez utiliser les polices utf génial cheatsheet

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

Answer 4

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

À partir du W3C:

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

Les auteurs de spécifier le style et l'emplacement, du contenu généré par les :before et :after pseudo-éléments. Comme leurs noms l'indiquent, la :before et :after pseudo-éléments de spécifier l'emplacement du contenu avant et après un élément de l'arborescence du document contenu. Le "contenu" bien, en conjonction avec ces pseudo-éléments, spécifie ce qui est inséré.

---

J'ai donc eu un projet où j'ai eu des boutons de soumission sous la forme d' input balises et pour une raison quelconque, les autres développeurs restreint moi d'utiliser <button> balises au lieu de l'habituel entrée soumettre des boutons, alors je suis venu avec une autre solution, les boutons d'habillage intérieur d'un span ensemble de position: relative; puis absolument le positionnement de l'icône à l'aide de :after pseudo.

Remarque: La démo de violon utilise le code de contenu pour FontAwesome 3.2.1 donc vous devrez peut-être modifier la valeur de content de la 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 auto-explicatif ici, sur une propriété que je.e pointer-events: none;, je l'ai utilisé que parce que, sur le planant au-dessus de l' :after pseudo du contenu généré par votre bouton ne cliquent pas, donc, en utilisant la valeur de none force de l'action du clic à faire passer à travers ce contenu.

À Partir De Mozilla Developer Network :

En outre, indiquant que l'élément n'est pas la cible de la souris les événements, la valeur none indique à l'événement de la souris pour aller "à travers" l' l'élément cible et tout ce qui est "en dessous" de cet élément à la place.

Placez le cœur de police/icône de Démonstration et de voir ce qui se passe si vous N'utilisez PAS pointer-events: none;

Answer 5

Aussi possible comme ça