39

我想在 BS3 中创建一个圆形按钮（一个完美的圆形），中间有一个 fontawesome(4.0) 图标。

到目前为止，我有以下代码：

HTML：

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

什么是 CSS 标记才能使这个按钮成为一个完美的圆圈？

4

9 回答 9

66

您可以执行诸如添加类以添加边框半径之类的操作

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

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

于 2013-10-26T00:08:02.420 回答
18

（未跨浏览器测试），但这是我的答案：

.btn-circle {
  width: 40px;
  height: 40px;
  line-height: 40px; /* adjust line height to align vertically*/
  padding:0;
  border-radius: 50%;
}
  • 通过 line-height 属性垂直居中
  • 填充变得无用，必须重置
  • 边框半径与按钮大小无关
于 2014-05-19T10:12:46.230 回答
16

Boostrap 3 正好有一个组件。它的：

<span class="badge">100</span>
于 2015-06-22T02:53:54.993 回答
5

这是使用 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;}
于 2015-03-08T21:21:33.033 回答
3

使用 Font Awesome 图标，我使用以下代码生成了一个带有您选择的颜色的圆形按钮/图像。

<code>

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

</code>
于 2014-08-13T11:48:24.900 回答
2

我遇到了同样的问题，并提出了一个非常简单的解决方案，或多或少适用于所有（xs、sm、正常和 lg）按钮：

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

btn-xs 和 -sm 之间的区别只是它们的填充。这个片段没有涵盖这一点。此代码段仅根据字体大小计算大小。

于 2015-06-14T11:54:33.990 回答
0

如果您已经在本地下载了这些文件，那么您可以在 bootstrap-social.css 中更改以下类，只需添加边框半径：50%；

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

这是 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>

它对我来说很顺利。

于 2014-06-17T03:39:00.627 回答
0

使用字体真棒堆叠图标（替代引导徽章）。这里有更多例子： 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"/>

于 2017-02-04T01:38:14.807 回答
0

要在任何按钮中添加圆角边框，最好的方法是添加border-radius属性。我相信这个类更好，因为你可以在任何按钮大小上添加它。如果您设置高度和宽度，您将需要为每个按钮大小创建一个“roding”类。

.btn-circle {
  border-radius: 50%;
}
<button class='btn-circle'>Click Me!</button>
<button class='btn-circle'>?</button>

于 2019-10-15T17:57:49.633 回答