Question

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

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

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

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

Answer 1

当然，为什么不使用：after和：之前的伪选择器？

<强> 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

<强>更新

要将它们放在彼此的顶部，只需将位置更改为绝对值，将一个相对位置放在容器元素上，然后将top和left设置为0以用于after和before。

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

希望有所帮助！

使用CSS将两个字体图标一个放在另一个上面

1 个答案: