Membuat tombol melingkar di BS3

Saya ingin membuat tombol bulat di BS3 (lingkaran sempurna), dengan satu ikon fontawesome(4.0) di tengahnya.

Sejauh ini, saya memiliki kode berikut:

HTML:

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

Apa yang akan menjadi markup CSS untuk membuat tombol ini menjadi lingkaran sempurna?

Pemrograman
css twitter-bootstrap-3 twitter-bootstrap
26 Oktober 2013 в 12:03
9 tayangan
Larutan

Anda dapat melakukan sesuatu seperti menambahkan kelas untuk menambahkan radius perbatasan

HTML:

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

CSS:

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

jika Anda ingin mengubah dimensi, Anda perlu mengubah ukuran font atau padding yang sesuai

Tarik
Jawaban edit 26 Oktober 2013 в 12:16
Komentar (3)

(Tidak diuji lintas browser), tetapi ini adalah jawaban saya:

.btn-circle {
  width: 40px;
  height: 40px;
  line-height: 40px; /* adjust line height to align vertically*/
  padding:0;
  border-radius: 50%;
}
  • pusat vertikal melalui properti line-height
  • padding menjadi tidak berguna dan harus diatur ulang
  • border-radius tidak tergantung pada ukuran tombol
Komentar (3)

Jika Anda telah mengunduh file-file ini secara lokal, maka Anda dapat mengubah kelas-kelas berikut di bootstrap-social.css, cukup tambahkan border-radius: 50%;

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

Dan berikut ini adalah HTML

<a class="btn btn-social-icon btn-lg btn-twitter" >

</a>
<a class=" btn btn-social-icon btn-lg btn-facebook">

</a>
<a class="btn btn-social-icon btn-lg btn-google-plus">

</a>

Ini bekerja dengan lancar untuk saya.

Komentar (0)