wake-up-neo.com

Erstellen Sie eine kreisförmige Schaltfläche in BS3

Ich möchte eine abgerundete Schaltfläche in BS3 (einen perfekten Kreis) erstellen, mit einem einzelnen fontawesome (4.0) Symbol in der Mitte.

Bisher habe ich folgenden Code:

HTML:

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

Was wäre das CSS-Markup, um diese Schaltfläche zu einem perfekten Kreis zu machen?

csstwitter-bootstraptwitter-bootstrap-3
38
alias51

sie können beispielsweise eine Klasse hinzufügen, um den Randradius hinzuzufügen

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;
}

wenn Sie die Bemaßung ändern möchten, müssen Sie die Schriftgröße oder den Abstand entsprechend anpassen 

62
Tarik

(Nicht browserübergreifend getestet), aber dies ist meine Antwort: 

.btn-circle {
  width: 40px;
  height: 40px;
  line-height: 40px; /* adjust line height to align vertically*/
  padding:0;
  border-radius: 50%;
}
  • vertikale Mitte über die Eigenschaft Zeilenhöhe
  • das Auffüllen wird unbrauchbar und muss zurückgesetzt werden
  • grenzradius unabhängig von der Tastengröße
17
chocopoche

Bootstrap 3 hat genau dafür eine Komponente. Es ist:

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

Dies ist die beste Referenz für 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

Mit Font Awesome ICONS habe ich den folgenden Code verwendet, um einen runden Knopf/ein Bild mit der Farbe Ihrer Wahl zu erzeugen.

<code>

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

</code>
2
Mir

Ich hatte das gleiche Problem und kam zu einer sehr einfachen Lösung funktionierte für alle (xs, sm, normal und lg) Tasten mehr oder weniger :

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

Der Unterschied zwischen den Btn-Xs und -sm ist nur ihre Auffüllung. Und das ist nicht mit diesem Ausschnitt abgedeckt. Dieses Snippet berechnet die Größen nur auf der Schriftgröße.

2
Itchy

Wenn Sie diese Dateien lokal heruntergeladen haben, können Sie die folgenden Klassen in bootstrap-social.css ändern. Fügen Sie einfach border-radius hinzu: 50%; 

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

Und hier ist das 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>

Es funktioniert reibungslos für mich.

0
Ali Adravi

Verwenden Sie gestapelte Icons (alternativ zu Bootstrap-Abzeichen). Hier sind weitere Beispiele: 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