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 プロパティによる垂直方向の中央揃え
  • パディングは役に立たなくなり、リセットする必要があります
  • ボタンサイズに依存しないborder-radius
于 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 ICONS では、次のコードを使用して、選択した色の丸いボタン/画像を作成しました。

<code>

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

</code>
于 2014-08-13T11:48:24.900 に答える
2

私は同じ問題を抱えていて、多かれ少なかれすべての（xs、sm、normal、lg）ボタンで機能する非常に単純な解決策を思いつきました：

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

btn-xs と -sm の違いはパディングのみです。そして、これはこのスニペットではカバーされていません。このスニペットは、font-size のみに基づいてサイズを計算します。

于 2015-06-14T11:54:33.990 に答える
0

これらのファイルをローカルにダウンロードした場合は、bootstrap-social.css で次のクラスを変更できます。

.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

ボタンに丸い境界線を追加するには、border-radiusプロパティを追加するのが最善の方法です。任意のボタンサイズで追加できるため、このクラスの方が優れていると思います。高さと幅を設定する場合は、ボタンのサイズごとに「ラウディング」クラスを作成する必要があります。

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

于 2019-10-15T17:57:49.633 に答える