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?
Anda dapat melakukan sesuatu seperti menambahkan kelas untuk menambahkan radius perbatasan
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;
}
jika Anda ingin mengubah dimensi, Anda perlu mengubah ukuran font atau padding yang sesuai
(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%;
}
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" >
<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>
Ini bekerja dengan lancar untuk saya.