堆叠多个字体真棒图标

Question

以下跨度旨在堆叠多种字体，通过CSS class赋值

<span class="fa-stack fa">
  <i class="fa fa-heart fa-stack-1x"></i>
  <i class="fa fa-heart-o fa-stack"></i>
  <i class="fa fa-heart-o fa-stack"></i>
</span>

span i:nth-of-type(2n+2){
  margin-top:-10px;
  margin-left:3px;
}
span i:nth-of-type(3n+3){
  margin-top:7px;
  margin-left:8px;
}

最终结果是第二个图标正确堆叠，但第三个图标表现得好像在外面

fa-class 定义为

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

我错过了什么？或者这可能吗？

Answer 1

我认为你的错误是使用了“nth-of-type(3n+3)”代码，因为我也没有找到类似的代码

   <span class="fa-stack fa">
  <i class="fa fa-heart fa-stack-1x"></i>
  <i class="fa fa-heart-o fa-stack"></i>
  <i class="fa fa-heart-o fa-stack"></i>
    </span>

你对容器和内部元素使用了相同的 class fa-stack 我发现这个解决方案仍然需要改进，但我相信你会明白的

<div class="fa-stack">
  <i class="fa fa-heart"></i>
  <i class="fa fa-heart-o"></i>
  <i class="fa fa-heart-o"></i>
</div>

这是 html 我使用的代码 div insted of span 并删除了不必要的 classes

.fa-stack {
  position: relative;
  width: 100%;
  height: 50px;
}
.fa-stack i:first-child {
  position: absolute;
  left: 20px;
  top: 15px;
}

.fa-stack i:nth-child(2) {
  position: absolute;
  top: 10px;
  left: 23px;
}
.fa-stack i:nth-child(3) {
  position: absolute;
  top: 6px;
  left: 26px;
}

这是 css 代码我用位置来改变每颗心的位置我也想在 fa-class 你可以改变字体大小等并给图标 % 位置而不是 px这是结果

堆叠多个字体真棒图标

stack multiple font awesome icons

css

stacked

font-awesome