web-dev-qa-db-fra.com

Polices géniales icône et texte dans le bouton de soumission d'entrée?

J'ai un problème similaire comme ici , je veux placer une icône de police géniale dans mon bouton d'envoi et un texte, il a l'air si: http://prntscr.com/608exx

Le contenu de ma valeur de soumission d'entrée est Buy now  

L'icône est visible car j'ai défini sur le champ de saisie font-family: FontAwesome; ma question est, comment puis-je définir sur mon texte à l'intérieur de la famille de polices standard de bouton?

18
m_73

Essayer 

<button type="submit" class="btn btn-default">
                    <i class="fa fa-shopping-cart"></i> Buy Now
                </button>
31
Society43

Pour ce faire, tout en conservant l'élément <input>, vous devez placer le glyphe Font Awesome en dehors du <input> et le positionner simplement au-dessus.

<span><i class="fas fa-shopping-cart glyph"></i></span>
<input type="button" class="button" value="Basket" />

Ensuite, ajoutez simplement du code CSS pour rendre le bouton entier cliquable.

.glyph{
    position: relative;
    left: 35px;
    pointer-events: none; //this makes the glyph clickable as part of the input
}

.button{
    width: 100px;
    height: 100px;
    padding-left: 20px;
}

JSFiddle

0
Christian Smith