Skip to main content
5 de 5
se añadieron 236 caracteres en el cuerpo
Lukas
  • 1.2k
  • 5
  • 20
  • 46

¿Círculo responsive y con el texto en el medio en bootstrap 4?

Estoy tratando de hacer un circulo con un icono en el medio pero sin hacer el width y height fijos. En este momento tengo esto:

.service {
  width: 150px;
  height: 150px;
  padding: 50%;
  background-color: #6D435A;
  color: #fff;
  border-radius: 50%;
  margin: 5px;
  border: solid 1px #FFFCF9;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="service">
    <i class="fa fa-check fa-1x" aria-hidden="true"></i>
</div>

¿Cómo puedo hacer un círculo perfecto sin hacer los width ni height fijos? Y, ¿cómo poner el texto en el medio? Supongo que habrá un método más eficiente que hacer el padding: 50%...

Lukas
  • 1.2k
  • 5
  • 20
  • 46