字体真棒敲在Squarespace其他divs /代码块

Question

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

这里是我一直用来初始设置字体真棒图标的小提琴。 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> 

Answer 2

内的代码注入>我创建一个链接到旧字体真棒样式表Squarespace的标头部分 - 因此，以支持它在IE7。

这覆盖了我现有的CSS，也弄乱了当前的模板。

我从代码注入部分删除它，并在我的CSS中使用import语句仍然支持IE7，但不覆盖我现有的样式表。