CSS 在 BS3 中创建一个圆形按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19601245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a circular button in BS3
提问by alias51
I want to create a rounded button in BS3 (a perfect circle), with a single fontawesome(4.0) icon in the center.
我想在 BS3（一个完美的圆圈）中创建一个圆形按钮，中心有一个 fontawesome(4.0) 图标。
So far, I have the following code:
到目前为止，我有以下代码：
HTML:
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?
使这个按钮成为一个完美的圆圈的 CSS 标记是什么？
回答by Tarik
you can do something like adding a class to add border radius
你可以做一些事情，比如添加一个类来添加边框半径
HTML:
HTML：
<a href="#" class="btn btn-default btn-circle"><i class="fa fa-user"></i></a>
CSS:
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
如果您想更改尺寸，则需要相应地更改字体大小或填充
回答by chocopoche
(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
- 通过 line-height 属性垂直居中
- 填充变得无用，必须重置
- 与按钮大小无关的边界半径
回答by Citizen
Boostrap 3 has a component for exactly this. It's:
Boostrap 3 正是为此提供了一个组件。它的：
<span class="badge">100</span>
回答by zakaiter
This is the best reference using font-awesome.
这是使用 font-awesome 的最佳参考。
http://bootsnipp.com/snippets/featured/circle-button?
http://bootsnipp.com/snippets/featured/circle-button？
CSS:
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;}
回答by Mir
With Font Awesome ICONS, I used the following code to produce a round button/image with the color of your choice.
使用 Font Awesome 图标，我使用以下代码生成具有您选择的颜色的圆形按钮/图像。
<code>
<span class="fa fa-circle fa-lg" style="color:#ff0000;"></span>
</code>
回答by Itchy
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:
我遇到了同样的问题，并提出了一个非常简单的解决方案，或多或少适用于所有（xs、sm、normal 和 lg）按钮：
.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.
btn-xs 和 -sm 之间的区别仅在于它们的填充。这个片段没有涵盖这一点。此代码段仅根据字体大小计算大小。
回答by Manish Jain
Use font-awesome stacked icons (alternative to bootstrap badges). Here are more examples: http://fontawesome.io/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"/>回答by Isabella Riquetti
To add a rounded border in any button the best way is to add the border-radiusproperty. 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.
要在任何按钮中添加圆形边框，最好的方法是添加border-radius属性。我相信这个类更好，因为您可以添加任何按钮大小。如果您设置高度和宽度，您将需要为每个按钮大小创建一个“rouding”类。
.btn-circle {
border-radius: 50%;
}<button class='btn-circle'>Click Me!</button>
<button class='btn-circle'>?</button>回答by Ali Adravi
If you have downloaded these files locally then you can change following classes in bootstrap-social.css, just added border-radius: 50%;
如果您在本地下载了这些文件，那么您可以在 bootstrap-social.css 中更改以下类，只需添加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
这是 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.
它对我来说很顺利。
