title: Font Awesome 5 - how to put an icon inside a circle?
body: <p>I'm trying to put some Font Awesome icons over a div element, making it look like a circle that contains the icons. There are in total three icons inside a circle each, and all the circle have to be next to each other. But when I try to do it the icons are not positioned correctly and the circles move out of place. I don't know what I'm doing wrong.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"&gt;
  
  &lt;div class="python"&gt;
     &lt;i class="fab fa-python"&gt;&lt;/i&gt;  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>