39

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?

alias51
  • 8,178
  • 22
  • 94
  • 166
  • possible duplicate of [How to center an icon in a circular background](http://stackoverflow.com/questions/19601280/how-to-center-an-icon-in-a-circular-background) – Paulie_D Oct 26 '13 at 06:12
  • You can overwrite the button class and add a border-radius of 30% or 50% to make it round – Eddwin Paz Jun 17 '14 at 03:46
  • check [this](http://stackoverflow.com/questions/11483708/creating-rounded-corners-for-top-half-of-the-buttons-in-css/28781315#28781315) recently i tried left squared right rounded , hope helps someone – Shaiju T Feb 28 '15 at 11:47
  • A simple and fancy button [Here is link](https://stackoverflow.com/a/50063037/6309457) – Devsi Odedra Apr 27 '18 at 13:26

9 Answers9

70

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

Tarik
  • 2,151
  • 4
  • 19
  • 26
18

(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
chocopoche
  • 309
  • 2
  • 4
  • 4
    border-radius:50% is brilliantly simple. – Shawn Taylor May 19 '14 at 23:41
  • 1
    This should be the accepted answer. Works flawlessly with FontAwesome. Also, you should use `34px` instead of `40px` to remain consistent with the standard BS3 button heights. – kjdion84 Jul 25 '16 at 06:42
  • If font-awesome cannot be centered, change font-size and add `text-align: center;`. Font-awesome by default aligns to the base-line vertically, causing it unable to align to the center, if the font size is not adequate. – WesternGun Mar 06 '18 at 16:22
16

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

<span class="badge">100</span>
Citizen
  • 12,430
  • 26
  • 76
  • 117
  • What if it's an icon button and no text will appear? There's a badge:empty rule that hides it. Is there something else I should use? – Travis Heeter Sep 13 '16 at 21:49
  • 2
    This doesn't give you a truly round background. If it contains an icon, it'll stretch horizontally, giving more of a 'pill' look. – sscirrus Mar 25 '17 at 06:54
  • @sscirrus True, and you can also add a secondary class similar to what others have posted but with fewer non-native changes. So class="badge badge-circle" could just be to set the border radius and you wouldn't have to set the background color, etc. – Citizen Mar 26 '17 at 20:04
  • This does not create a circular button as asked. It only rounds the edges – Th4t Guy Jan 17 '18 at 23:33
5

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;}
Community
  • 1
  • 1
zakaiter
  • 439
  • 3
  • 11
3

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>
Trudbert
  • 3,178
  • 14
  • 14
Mir
  • 31
  • 1
2

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.

Itchy
  • 2,263
  • 28
  • 41
1

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 {
  border-radius: 50%;
}
<button class='btn-circle'>Click Me!</button>
<button class='btn-circle'>?</button>
Isabella Riquetti
  • 415
  • 3
  • 14
0

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.

Ali Adravi
  • 21,707
  • 9
  • 87
  • 85
0

Use font-awesome stacked icons (alternative to bootstrap badges). Here are more examples: 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"/>
Manish Jain
  • 9,569
  • 5
  • 39
  • 44