title: Font awesome knocking other divs/code blocks around in Squarespace
body: <p>I'm attempting to simply align some font awesome icons. In Squarespace's configuaration mode, they look fine, but when the page is reloaded they get knocked around. The image attached shows how it looks in Squarespace's config mode. </p>
  
  <p>Here's the fiddle I've been using to initally set up the font awesome icons. <a href="https://jsfiddle.net/gavinfriel/e06qzw59/" rel="nofollow noreferrer">https://jsfiddle.net/gavinfriel/e06qzw59/</a></p>
  
  <pre><code>&lt;div class="main-container"&gt;
    &lt;div class="fixer-container"&gt;
      &lt;a href="#"&gt;
        &lt;div class="outline-circle"&gt;
          &lt;i class="fa fa-arrow-up" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/YhTY1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YhTY1.png" alt="How icons should line up"></a></p>
  
  <p>Here's whats happening: neueda-consulting.squarespace.com/training</p>
  
  <p>Your help would be appreciated! </p>