Сделать шрифт Удивительные значки на границе круга с правым соотношением 1: 1

Question

В некотором случае, если отношение значка не 1: 1, граница больше не круг.

Вот пример:

настоящее время я использую:

HTML: 

.socials 
     a(href='#') <i class="fa fa-facebook"></i> 
     a(href='#') <i class="fa fa-twitter"></i> 
     a(href='#') <i class="fa fa-google"></i> 

SASS: 

     border-radius: 50% 
     border: solid white 
     padding: 10px 

Есть в любом случае, что я могу использовать CSS, чтобы исправить эту проблему?

Answer 1

вам необходимо установить ширину, высоту, высота линии & выравнивания текста по центру Icône. icone потребуется также вертикально-выравнивать сброс до середины.

избегать заполнения в пикселях, но использовать ширину/высоту/линию-высоту в em или rem. Затем вы можете изменить размер шрифта и сохранить коэффициент без обновления других значений.

a /* or selector a .fa */ 
 
    { 
 
    font-size:3em; 
 
    border-radius: 50%; 
 
    border: solid white; 
 
    color: white; 
 
    line-height: 2em; 
 
    width: 2em; 
 
    height: 2em; 
 
    text-align: center; 
 
    display: inline-block; 
 
    transition:0.5s; 
 
} 
 
/* demo purpose */ 
 
a:hover {font-size:2em} 
 
.fa { 
 
/* optionnal vertical-align: middle;*/ 
 
} 
 
body { 
 
    background: #333 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<a href="#"><i class="fa fa-facebook"></i></a> 
 
<a href="#"><i class="fa fa-twitter"></i></a> 
 
<a href="#"> <i class="fa fa-google"></i> 
 
</a>

Answer 2

border-radius в процентах, рассчитанных как процент от ширины и высоты. попробуйте 50px для экзамена.

div { 
 
    margin: .3em; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: 2em; 
 
    color: white; 
 
} 
 
.pc { 
 
    width: 200px; 
 
    height: 80px; 
 
    background-color: blue; 
 
    border-radius: 50%; 
 
} 
 
.px { 
 
    width: 200px; 
 
    height: 80px; 
 
    background-color: blue; 
 
    border-radius: 50px; 
 
}

<div class="pc">%</div> 
 
<div class="px">px</div>

Answer 3

установлен фиксированный width и height и использовать text-align:center

i { 
 
    border-radius: 50%; 
 
    border: solid black; 
 
    padding: 10px; 
 
    width:16px; 
 
    height: 16px; 
 
    text-align:center 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<i class="fa fa-facebook"></i> 
 
<i class="fa fa-twitter"></i> 
 
<i class="fa fa-google"></i>

Answer 4

Для достижения этой цели, сохраняя при этом значок с его соотношением сторон необходимо назначить контейнер для e с соотношением 1: 1 (такая же ширина, как и высота).

i.fa-facebook { 
 
    padding: 10px; 
 
    color: white; 
 
} 
 

 
.border { 
 
    border-radius: 50%; 
 
    border: solid white; 
 
} 
 

 
a.icon_container { 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 50%; 
 
    border: solid white; 
 
    text-align: center; 
 
    float: left; 
 
} 
 

 
body { 
 
    background: black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<i class="fa fa-facebook border"></i> 
 
<a href="#" class="icon_container border"><i class="fa fa-facebook"></i></a>