2

我想将两个字体图标放在另一个上方。所以我可以将它用作：

<span class="icon1-on-icon2" />

是否可以定义 CSS 类来实现这一点？不允许在跨度内使用其他元素，例如：

<span class="stack">
   <span class="icon1"/>
   <span class="icon2" />
</span>
4

1 回答 1

3

当然，为什么不使用 :after 和 :before 伪选择器呢？

CSS

.font-icon {
  height: 40px;
  width: 20px;
}

.font-icon:after, .font-icon:before {
  color: white;
  content: '';
  display: block;
  font-family: 'your-font-icon';
  height: 20px;
  position: relative;
  width: 20px;
}

.font-icon:before {
  background: red;
  content: 'h';
}

.font-icon:after {
  background: blue;
  content: 'g';
}

HTML

<span class='font-icon'></span>

Codepen 草图在这里：http ://cdpn.io/lehzr

更新

要将它们放在彼此的顶部，只需将位置更改为绝对位置，在容器元素上放置一个相对位置，并将前后位置的顶部和左侧设置为 0。

示例：http ://cdpn.io/lehzr

希望有帮助！

于 2013-08-17T23:34:36.027 回答