具有一个 css 类的堆叠图标

在新的 FontAwesome 4.0.0 中，堆叠项目有 css 样式。

<span class="fa-stack">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  width: 100%;
  text-align: center;
 }
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}

.fa-square-o:before {
  content: "\f096";
}

我只想在不使用嵌套的情况下做到这一点span and i，仅适用于某些 css 类

.myclass1 { ... }
.myclass2 { ... }
<span class=".... myclass2" />

达到相同结果的最简单方法是什么（使用 fa 内容类？）

Update: 或者像下面这样的可能吗？

 .myclass1:before { content:     '<span class="fa-stack">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>' }

     <span class=".... myclass1" />

(edited)

这是不可能的fa-*类，因为无法确定堆叠图标的顺序：在 CSS 中class="foo bar"是相同的class="bar foo"

另一方面，您可以定义自己的类并对其进行样式化以实现一个选定的堆叠图标- 也就是说，每对都需要一个自定义类（例如fa-times叠在fa-square).

为了实现这一点，请使用:before and :after选择器（和绝对定位 -小演示 http://jsfiddle.net/Zn5e2/).

似乎也（使用测试过background财产）那:after元素位于顶部:before如果你使用绝对定位。如果事实并非如此，您可以随时使用z-index手动订购这两个元素。