どのように私はCSSでdiv要素に素晴らしいフォントからアイコンを含めることができますか？

Ornella Acerbi：

私はそれがアイコンが含まれ、円のように見えるように、div要素の上にいくつかのフォント恐ろしいアイコンを置くしようとしています。そこ円の各内部合計3つのアイコンであり、そして全ての円は隣同士になる必要があります。私はそれをしようとする場合でも、アイコンが正しく配置されておらず、円は場違いに移動します。私は私が間違ってやっているのか分かりません。

HTML

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

CSS

.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;
}

}

Afifに同行：

フォント恐ろしいすでにこれを許可、あなたはそれを自分で行う必要はありません。

<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: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