在已经有伪元素的容器上使用字体awesome

Question

我需要在已经应用了伪元素（之前和之后）的div上显示字体真棒图标。假设我有一个div，一个3d效果纸，它使用伪元素。现在我想绘制一个联系我们表单，它使用字体真棒图标。但字体真棒图标没有显示。

我尝试在联系我们表单周围保留一个虚拟div，并明确修复。但仍然没有工作

更新： http://jsfiddle.net/tss5Z/

<div class="slickbox row">
    <div class="col-md-6">
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
            <input type="text" class="form-control" placeholder="Name">
        </div>
    </div>
    <div class="clear"></div>

</div>
<div class="input-group">
    <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
    <input type="text" class="form-control" placeholder="Name">
</div>

Answer 1

我认为你的CSS中只有一个错误。

尝试删除班级选择器之后的空格......所以：

.slickbox :before, .slickbox :after { ...

会变成：

.slickbox:before, .slickbox:after { ...

等等。请参阅 jsFiddle 。