与一个css类的被堆积的象 [英] Stacked icons with one css class

问题描述

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

In new FontAwesome 4.0.0 there is css styles for stacked items.

<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 和 i ，只有一些css-classes

I want to do it only without using nested span and i, just only with some css-classes

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

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

What is the simplest method to achieve the same result (using fa content classes ?)

更新：
或类似以下内容？

Update: or is something like the following possible ?

 .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" />

推荐答案

（已编辑）

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

This is not possible with fa-* classes, because there is no possibility to determine the order of stacked icons: in CSS class="foo bar" is the same as class="bar foo"

另一方面，您可以定义自己的类并设置样式以实现一个选定的堆叠图标 - 即每对需要一个自定义类（例如 fa -times 堆积在 fa-square ）。

On the other side, you can define your own class and style it to achieve one chosen stacked icon - i.e you'll need one custom class per every pair (e.g fa-times stacked on fa-square).

为了达到这个目的，使用：在和之前：选择器之后（和绝对定位 - 小小的演示）。

In order to achieve this, use :before and :after selectors (and absolute positioning - little demo).

它似乎（使用背景属性）：元素在之后：如果使用绝对定位，则在之前。如果不是这样，你cvan总是使用 z-index 手动订购这两个元素。

It also seems (tested using background property) that :after element is on top of :before if you use absolute positioning. In case that's not true, you cvan always use z-index to order those two elements manually.

这篇关于与一个css类的被堆积的象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！