html - Font awesome 在 Squarespace 中敲打其他 div/代码块

Question

我试图简单地对齐一些很棒的字体图标。在 Squarespace 的配置模式下，它们看起来不错，但是当页面重新加载时，它们会四处乱转。所附图片显示了它在 Squarespace 的配置模式下的外观。

这是我用来初始设置超赞字体图标的 fiddle 。 https://jsfiddle.net/gavinfriel/e06qzw59/

<div class="main-container">
  <div class="fixer-container">
    <a href="#">
      <div class="outline-circle">
        <i class="fa fa-arrow-up" aria-hidden="true"></i>
      </div>
    </a>
  </div>
</div>

这是正在发生的事情:neueda-consulting.squarespace.com/training

非常感谢您的帮助!

Answer 1

您要添加到列中的 span-3 类会在左侧创建边距。您只需要删除此类即可使其正常工作。

代码:

  <div class="row sqs-row">
    <div class="col sqs-col-3"> <!-- span-3 WAS REMOVED HERE -->
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_7_1461928923800_5416">
        <div class="sqs-block-content">
          <div class="main-container">
            <div class="fixer-container">
              <a href="#">
                <div class="outline-circle">
                  <i class="fa fa-arrow-up" aria-hidden="true"></i>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_2_1461936702983_9972">
        <div class="sqs-block-content">
          <a href="#">
            <p class="training-name">AGILE AND ARCHITECTURE</p>
          </a>
        </div>
      </div>
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_7_1461928923800_18889">
        <div class="sqs-block-content">
          <div class="main-container">
            <div class="fixer-container">
              <a href="#">
                <div class="outline-circle">
                  <i class="fa fa-desktop" style="font-size: 65px; margin-top:22px;" aria-hidden="true"></i>
                </div>
              </a>
            </div>
          </div>


        </div>
      </div>
    </div>
    <div class="col sqs-col-3"> <!-- span-3 WAS REMOVED HERE -->
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_7_1461928923800_7510">
        <div class="sqs-block-content">
          <div class="main-container">
            <div class="fixer-container">
              <a href="#">
                <div class="outline-circle">
                  <i class="fa fa-code" aria-hidden="true"></i>
                </div>
              </a>
            </div>
          </div>


        </div>
      </div>
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_2_1461937219914_16038">
        <div class="sqs-block-content">
          <a href="#">
            <p class="training-name">PROGRAMMING LANGUAGES</p>
          </a>
        </div>
      </div>
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_7_1461928923800_24250">
        <div class="sqs-block-content">
          <div class="main-container">
            <div class="fixer-container">
              <a href="#">
                <div class="outline-circle">
                  <i class="fa fa-check" style="margin-top:13px;" aria-hidden="true"></i>
                </div>
              </a>
            </div>
          </div>


        </div>
      </div>
    </div>
    <div class="col sqs-col-3"><!-- span-3 WAS REMOVED HERE -->
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_7_1461928923800_29285">
        <div class="sqs-block-content">
          <div class="main-container">
            <div class="fixer-container">
              <a href="#">
                <div class="outline-circle">
                  <i class="fa fa-eye" aria-hidden="true"></i>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_2_1461937219914_17788">
        <div class="sqs-block-content">
          <a href="#">
            <p class="training-name">ANALYSIS AND MANAGEMENT</p>
          </a>
        </div>
      </div>
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_7_1461928923800_12489">
        <div class="sqs-block-content">
          <div class="main-container">
            <div class="fixer-container">
              <a href="#">
                <div class="outline-circle">
                  <i class="fa fa-database" style="font-size: 70px;" aria-hidden="true"></i>
                </div>
              </a>
            </div>
          </div>


        </div>
      </div>
    </div>
    <div class="col sqs-col-3"><!-- span-3 WAS REMOVED HERE -->
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_7_1461928923800_33960">
        <div class="sqs-block-content">
          <div class="main-container">
            <div class="fixer-container">
              <a href="#">
                <div class="outline-circle">
                  <i class="fa fa-globe" style="line-height:102px !important;" aria-hidden="true"></i>
                </div>
              </a>
            </div>
          </div>


        </div>
      </div>
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_2_1461937219914_19354">
        <div class="sqs-block-content">
          <a href="#">
            <p class="training-name">ENTERPRISE PLATFORMS</p>
          </a>
        </div>
      </div>
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_7_1461928923800_36065">
        <div class="sqs-block-content">
          <div class="main-container">
            <div class="fixer-container">
              <a href="#">
                <div class="outline-circle">
                  <i class="fa fa-line-chart" style="font-size:60px;" aria-hidden="true"></i>
                </div>
              </a>
            </div>
          </div>


        </div>
      </div>
    </div>
  </div>
</div>