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