title: Unable to move icon inside the circle
body: <p>I am trying to place <code>fa-graduation-cap</code> inside a circle.</p>
  <p>So, that means:</p>
  <pre><code>&lt;span class=&quot;fa-stack&quot;&gt;
    &lt;i class=&quot;fa fa-circle fa-stack-4x text-primary&quot;&gt;&lt;/i&gt;
    &lt;i class=&quot;fa fa-graduation-cap fa-2x&quot;&gt;&lt;/i&gt;
  &lt;/span&gt;
  </code></pre>
  <p>But it doesn't work. The output is this:</p>
  <p><a href="https://i.stack.imgur.com/u9wjH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u9wjH.png" alt="enter image description here" /></a></p>
  <p>The <code>graduation-cap</code> is outside the circle. Why is that?</p>
  <hr />
  <h3>Note:</h3>
  <p><code>text-primary</code> is the bootstrap class for color.</p>