在BS3中创建一个圆形按钮

Question

我想在BS3(一个完美的圆圈)中创建一个圆形按钮,中间有一个fontawesome(4.0)图标.

到目前为止,我有以下代码:

HTML:

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

CSS标记会使这个按钮成为一个完美的圆圈？

Answer 1

你可以做一些事情,比如添加一个类来添加边界半径

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

如果您想要更改尺寸,则需要相应地更改字体大小或填充

Answer 2

(不是跨浏览器测试),但这是我的答案:

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

• 垂直中心通过line-height属性
• 填充变得无用,必须重置
• border-radius独立于按钮大小

Answer 3

Boostrap 3有一个组件正是如此.它的:

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

Answer 4

这是使用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;}