字體真棒敲在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，但不覆蓋我現有的樣式表。