web-dev-qa-db-fra.com

bootstrap 4: bouton avec icône et texte

J'essaie de créer des boutons comme vous pouvez le voir ci-dessous avec Bootstrap 4:

enter image description here

L'icône (police impressionnante) doit être centrée sur le texte et toutes les icônes ont la même position y à l'écran. La bordure des boutons doit être invisible.

Dois-je utiliser un bouton ou est-il préférable d'utiliser un autre élément? Toute aide est la bienvenue.

htmlcsstwitter-bootstrapbootstrap-4
5
netshark1000

Avec Bootstrap 4 et Font-Awesome, si vous souhaitez placer l'icône à gauche du texte, utilisez l'extrait de code suivant

<button class="btn btn-lg" style="background-color:transparent;">
   <i class="fa fa-pencil"></i> Edit
</button>
19
Nitin Kamate

Créez un div, puis mettez-y des icônes géniales pour les polices, puis écrivez le texte, puis fournissez le css et vous pouvez utiliser (click) événement sur le div.

Install bootstrap and font-awesome

puis fournir le chemin dans les "styles" de angular-cli.json. ou,

<button class='btn btn-lg ' style='background-color:transparent;'> 
  <div style='text-align:center;'><i class="fa fa-times"></i></div>  
    Cancel Reservation
</button>
5
Manzer