与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图标缩进列表项

回答

相关问题