css - font-awesome - 使用 :before 生成一个大图标，文本在其下方居中

Question

这可以用图标字体和 :before 来完成吗？

目标:一个位于 div 中心的大图标，其下方有一个文本标签。

我执行此操作的旧方法是使用背景图像和 padding-top 将图像呈现在 div 内容之上。

更喜欢使用图标字体。使用 :before 在文本左侧显示图标很容易，但是否可以将其显示在上方？

谢谢。

编辑:除了沼泽标准图标字体用法外，我没有其他代码:

.mydiv:before {
内容:“\f11c”；/* 这是图标的 Unicode */
字体系列:FontAwesome；
右边距:.2em；
}

这会在文本前放置一个图标。甚至不知道是否可以将它放在上面。

Answer 1

会不会是这样的？

.mydiv {
    font-family: sans-serif;
    width: 120px;
    padding: 10px 0;
    text-align: center;
    border: 1px solid #000;
    border-radius: 3px;
    background: #333;
    color: #fff;
}

.mydiv:before {
    content: "\f11c ";    
    font-family: FontAwesome;
    display: block;
    margin-right: .2em;
    text-align: center;
}

http://jsfiddle.net/4W8dg/