我想在 BS3 中创建一个圆形按钮(一个完美的圆),中间只有一个 fontawesome(4.0) 图标。
目前,我有以下代码:
HTML:
<a href="#" class="btn btn-default"><i class="fa fa-user"></i></a>
要使这个按钮成为一个完美的圆形,CSS 标记应该如何设置?
您可以添加一个类来增加边框半径
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;
}
如果您想更改尺寸,则需要相应更改字体大小或填充
如果您已将这些文件下载到本地,则可以更改 bootstrap-social.css 中的以下类,只需添加 border-radius: 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>
我用起来很顺手。