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

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%...

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

<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%...

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%...

se añadieron 182 caracteres en el cuerpo
Origen Enlace
Lukas
  • 1.2k
  • 5
  • 20
  • 46

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

<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%...

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

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

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

<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%...

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;
border-radius: 50%;
margin: 5px;
border: solid 1px #FFFCF9;
}

El código HTML:

<div class="service">
    <i class="fa fa-check fa-1x" aria-hidden="true"></i>
</div>
.service {
  width: 150px;
  height: 150px;
  padding: 50%;
  background-color: #6D435A;
  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">

<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%...

 

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;
border-radius: 50%;
margin: 5px;
border: solid 1px #FFFCF9;
}

El código HTML:

<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%...

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

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

se añadieron 188 caracteres en el cuerpo
Origen Enlace
Lukas
  • 1.2k
  • 5
  • 20
  • 46
Loading
Origen Enlace
Lukas
  • 1.2k
  • 5
  • 20
  • 46
Loading