Create a circular button in BS3

Question

I want to create a rounded button in BS3 (a perfect circle), with a single fontawesome(4.0) icon in the center.

So far, I have the following code:

HTML:

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

What would the CSS markup be to make this button a perfect circle?

Answer 1

you can do something like adding a class to add border radius

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

in case you wanted to change dimension you need to change the font size or padding accordingly

Answer 2

(Not cross-browser tested), but this is my answer:

.btn-circle {   width: 40px;   height: 40px;   line-height: 40px; /* adjust line height to align vertically*/   padding:0;   border-radius: 50%; } 

• vertical center via the line-height property
• padding becomes useless and must be reset
• border-radius independant of the button size