Font Awesome 5 - как разместить значок внутри круга? - PullRequest
Новая
       23

Font Awesome 5 - как разместить значок внутри круга?

1 голос
/ 30 марта 2020

Я пытаюсь поместить несколько значков Font Awesome поверх элемента div, чтобы он выглядел как круг, содержащий значки. Всего в круге по три иконки, и все круги должны быть рядом друг с другом. Но когда я пытаюсь это сделать, значки располагаются неправильно и круги перемещаются не на свое место. Я не знаю, что я делаю не так. 

.python {
    width: 200px;
    height: 200px;
    display: inline-block;
    border-radius: 50%;
    margin-left: 183px;
    background-color: lightblue;
}
.fa-python{
    font-size: 100px;
    display: inline-block;
    position: relative;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

<div class="python">
   <i class="fab fa-python"></i>  
</div>

1 Ответ

2 голосов
/ 30 марта 2020

Шрифт Awesome уже позволяет это делать, вам не нужно делать это самостоятельно: 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

<span class="fa-stack fa-2x" >
    <i class="far fa-circle fa-stack-2x"></i>
    <i class="fab fa-python fa-stack-1x"></i>
</span>
<span class="fa-stack fa-2x" >
    <i class="fas fa-circle fa-stack-2x" style="color:lightblue"></i>
    <i class="fab fa-python fa-stack-1x "></i>
</span>
<span class="fa-stack fa-2x" >
    <i class="fas fa-circle fa-stack-2x" style="color:blue"></i>
    <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x" >
    <i class="fas fa-circle fa-stack-2x" ></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

Похожие: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

...