Squarespaceの他のdivs/codeブロックをノックアウトしても素晴らしいフォント

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

あなたの列に追加するスパン3クラスは、左側に余白を作成します。このクラスを削除するだけで、動作させることができます。

コード：Squarespaceのコード・インジェクション>ヘッダ部内

<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

私は古いフォント素晴らしいスタイルシートへのリンクを作成していた - そうIE7でそれをサポートします。

これは私の既存のCSSを無効にして、現在のテンプレートも邪魔していました。

私はコードインジェクションセクションからそれを削除し、IE7をサポートするために私のCSSでimportステートメントを使用しましたが、既存のスタイルシートをオーバーライドしませんでした。