web-dev-qa-db-fra.com

Créer un bouton circulaire dans BS3

Je souhaite créer un bouton arrondi dans BS3 (un cercle parfait), avec une seule icône fontawesome (4.0) au centre.

Jusqu'à présent, j'ai le code suivant:

HTML:

<a href="#" class="btn btn-default"><i class="fa fa-user"></i></a>

Que serait le balisage CSS pour faire de ce bouton un cercle parfait?

csstwitter-bootstraptwitter-bootstrap-3
38
alias51

vous pouvez faire quelque chose comme l'ajout d'une classe pour ajouter un rayon de bordure

HTML:

<a href="#" class="btn btn-default btn-circle"><i class="fa fa-user"></i></a>

CSS:

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.42;
  border-radius: 15px;
}

au cas où vous voudriez changer de dimension, vous devez changer la taille de la police ou le remplissage en conséquence 

62
Tarik

(Pas testé sur plusieurs navigateurs), mais voici ma réponse: 

.btn-circle {
  width: 40px;
  height: 40px;
  line-height: 40px; /* adjust line height to align vertically*/
  padding:0;
  border-radius: 50%;
}
  • centre vertical via la propriété line-height
  • le rembourrage devient inutile et doit être réinitialisé
  • border-radius indépendant de la taille du bouton
17
chocopoche

Bootstrap 3 a un composant pour cela. Ses:

<span class="badge">100</span>
16
Citizen

C'est la meilleure référence en utilisant font-awesome.

http://bootsnipp.com/snippets/featured/circle-button ?

CSS:

    .btn-circle { width: 30px; height: 30px; text-align: center;padding: 6px 0;font-size: 12px;line-height: 1.428571429;border-radius: 15px;}.btn-circle.btn-lg {width: 50px;height: 50px;padding: 10px 16px;font-size: 18px;line-height:1.33;border-radius: 25px;}
4
zakaiter

Avec Font Awesome ICONS, j’ai utilisé le code suivant pour produire un bouton rond/une image de la couleur de votre choix.

<code>

<span class="fa fa-circle fa-lg" style="color:#ff0000;"></span>

</code>
2
Mir

J'ai eu le même problème et est venu avec une solution très simple travail pour tous (xs, sm, normal et lg) plus ou moins boutons :

.btn-circle {
    border-radius: 50%;
    padding: 0.1em;
    width:1.8em;
}

La différence entre btn-xs et -sm ne sont que leur remplissage. Et ce n'est pas couvert de cet extrait. Cet extrait calcule les tailles en fonction de la taille de la police uniquement.

2
Itchy

Si vous avez téléchargé ces fichiers localement, vous pouvez modifier les classes suivantes dans bootstrap-social.css, en ajoutant simplement border-radius: 50%; 

.btn-social-icon.btn-lg{height:45px;width:45px;
   padding-left:0;padding-right:0; border-radius: 50%; }

Et voici le HTML

<a class="btn btn-social-icon btn-lg btn-Twitter" >
   <i class="fa fa-Twitter"></i>
</a>
<a class=" btn btn-social-icon btn-lg btn-facebook">
   <i class="fa fa-facebook sbg-facebook"></i>
</a>
<a class="btn btn-social-icon btn-lg btn-google-plus">
   <i class="fa fa-google-plus"></i>
</a>

Cela fonctionne bien pour moi.

0
Ali Adravi

Utilisez des icônes superposées de polices géniales (alternative aux badges bootstrap). Voici d'autres exemples: http://fontawesome.io/examples/

 .no-border {
        border: none;
        background-color: white;
        outline: none;
        cursor: pointer;
    }
.color-no-focus {
        color: grey;
    }
  .hover:hover {
        color: blue;
    }
 .white {
        color: white;
    }
<button type="button" (click)="doSomething()" 
class="hover color-no-focus no-border fa-stack fa-lg">
<i class="color-focus fa fa-circle fa-stack-2x"></i>
<span class="white fa-stack-1x">1</span>
</button>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

0
Manish Jain