與fontawesome圖標縮進列表項

我試圖與fontawesome圖標我的列表中的項目是這樣的：與fontawesome圖標縮進列表項

但此刻，他們是這樣的：

這裏我的HTML：

<section id="black-studio-tinymce-6" class="widget widget_black_studio_tinymce"> 
    <h2 class="widget-title">Contact Us</h2> 
    <div class="textwidget"> 
    <ul> 
     <li>021 552 1187</li> 
     <li>[email protected]</li> 
     <li>Unit S19 Spearhead Business Park<br> 
     cnr Montague Drive &amp; Freedom Way<br> 
     Montagu Gardens<br> 
     Cape Town, South Africa</li> 
    </ul> 
    </div> 
</section>

這裏我的造型：

section#black-studio-tinymce-6 div.textwidget ul { 
    list-style: none; 
    padding-left: 0; 
    margin: 0; 
    li { 
    &:first-child:before { 
     @extend .font-awesome-footer; 
     content: '\f095'; 
    } 

    &:nth-child(2):before { 
     @extend .font-awesome-footer; 
     content: '\f003'; 
    } 

    &:last-child:before { 
     @extend .font-awesome-footer; 
     content: '\f041'; 
    } 
    } 
}

如何縮進fontawesome鏈接的圖片顯示後的內容？希望你能幫上忙。

來源

2016-11-29 Wosley Alarico

組你'李：之前'併入一個並擴展'.font-awesome-footer'以節省空間，我認爲你應該考慮只使用'nnth-child'來獲得更一致的代碼 –

這是很容易解決：

添加一些填充到列表項和定位你的圖標在填補區域絕對的。

li { 
    padding-left: 40px; 
    position: relative; 
    &:before { 
     display: inline-block; 
     position: absolute; 
     left: 0; 
    } 
}

來源

2016-11-29 07:59:04 connexo

它神奇地工作。 –

您可以使用margin-left：10px;但不會因爲一個圖標的工作留給都有不同的長度，這樣做這樣的事情每個孩子：

margin-right: 800px;

修改800像素，可滿足您最

來源

2016-11-29 08:00:26

與fontawesome圖標縮進列表項

回答

相關問題