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    lt a href     class  btn btn-default  gt  lt i class  fa fa-user  gt  lt  i gt  lt  a gt    What would the CSS markup be to make this button a perfect circle

User · Answer

Use font-awesome stacked icons  alternative to bootstrap badges   Here are more examples  http   fontawesome io examples    x000D   x000D    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        x000D   lt button type  button   click   doSomething     x000D  class  hover color-no-focus no-border fa-stack fa-lg  gt  x000D   lt i class  color-focus fa fa-circle fa-stack-2x  gt  lt  i gt  x000D   lt span class  white fa-stack-1x  gt 1 lt  span gt  x000D   lt  button gt  x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  rel  stylesheet   gt  x000D   x000D   x000D

User · Answer

Boostrap 3 has a component for exactly this  It s    lt span class  badge  gt 100 lt  span gt

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D   btn-circle   x000D    border-radius  50   x000D    x000D   lt button class  btn-circle  gt Click Me  lt  button gt  x000D   lt button class  btn-circle  gt   lt  button gt  x000D   x000D   x000D

User · Answer

you can do something like adding a class to add border radius  HTML    lt a href     class  btn btn-default btn-circle  gt  lt i class  fa fa-user  gt  lt  i gt  lt  a gt    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

User · Answer

With Font Awesome ICONS  I used the following code to produce a round button image with the color of your choice    lt code gt    lt span class  fa fa-circle fa-lg  style  color  ff0000   gt  lt  span gt    lt  code gt

User · Answer

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   lt a class  btn btn-social-icon btn-lg btn-twitter   gt      lt i class  fa fa-twitter  gt  lt  i gt   lt  a gt   lt a class   btn btn-social-icon btn-lg btn-facebook  gt      lt i class  fa fa-facebook sbg-facebook  gt  lt  i gt   lt  a gt   lt a class  btn btn-social-icon btn-lg btn-google-plus  gt      lt i class  fa fa-google-plus  gt  lt  i gt   lt  a gt    It works smooth for me

User · Answer

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

[css] Create a circular button in BS3

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3