Создайте круговую кнопку в BS3

Ответ 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;
}

если вы хотите изменить измерение, вам нужно изменить размер шрифта или дополнение соответственно

Ответ 2

(Не перекрестный браузер), но это мой ответ:

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

• вертикальный центр с помощью свойства line-height
• отступы становятся бесполезными и должны быть reset
• border-radius независимо от размера кнопки

Ответ 3

Boostrap 3 имеет компонент для этого. Это:

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

Ответ 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;} 

Ответ 5

С Font Awesome ICONS я использовал следующий код для создания круглой кнопки/изображения с цветом по вашему выбору.

<code>

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

</code>

Ответ 6

У меня была та же проблема и пришло очень простое решение для всех (xs, sm, normal и lg) кнопок более или менее:

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

Разница между btn-xs и -sm - это только их отступы. И это не распространяется на этот фрагмент. Этот фрагмент вычисляет размеры только на основе размера шрифта.

Ответ 7

Если вы загрузили эти файлы локально, вы можете изменить следующие классы в 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>

Он работает плавно для меня.

Ответ 8

Использовать шрифт-удивительные значки с выдержкой (альтернатива значкам загрузки). Вот еще примеры: 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"/>

Ответ 9

Чтобы добавить закругленную границу в любую кнопку, лучше всего добавить свойство border-radius. Я считаю, что этот класс лучше, потому что вы можете добавить его в любой размер кнопки. Если вы установили высоту и ширину, вам нужно будет создать класс "роудинг" для каждого размера кнопки.

.btn-circle {
  border-radius: 50%;
}

<button class='btn-circle'>Click Me!</button>
<button class='btn-circle'>?</button>