[css] Create a circular button in BS3

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?

To add a rounded border in any button the best way is to add the border-radius property. I belive this class is better because you can add-it at any button size. If you set the height and widht you will need to create a "rouding" class to each button size.

.btn-circle {_x000D_
  border-radius: 50%;_x000D_
}

<button class='btn-circle'>Click Me!</button>_x000D_
<button class='btn-circle'>?</button>

Boostrap 3 has a component for exactly this. It's:

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

I had the same problem and came up with a very simple solution working for all (xs, sm, normal and lg) buttons more or less:

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

The difference between the btn-xs and -sm are only their padding. And this is not covered with this snippet. This snippet calculates the sizes based on the font-size only.

This is the best reference using 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;} 

If you have downloaded these files locally then you can change following classes in bootstrap-social.css, just added border-radius: 50%;

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

And here is teh 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>

It works smooth for me.

(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

With Font Awesome ICONS, I used the following code to produce a round button/image with the color of your choice.

<code>

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

</code>

Use font-awesome stacked icons (alternative to bootstrap badges). Here are more examples: http://fontawesome.io/examples/

 .no-border {_x000D_
        border: none;_x000D_
        background-color: white;_x000D_
        outline: none;_x000D_
        cursor: pointer;_x000D_
    }_x000D_
.color-no-focus {_x000D_
        color: grey;_x000D_
    }_x000D_
  .hover:hover {_x000D_
        color: blue;_x000D_
    }_x000D_
 .white {_x000D_
        color: white;_x000D_
    }

<button type="button" (click)="doSomething()" _x000D_
class="hover color-no-focus no-border fa-stack fa-lg">_x000D_
<i class="color-focus fa fa-circle fa-stack-2x"></i>_x000D_
<span class="white fa-stack-1x">1</span>_x000D_
</button>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>