如何将fontawesome图标置于位置内：绝对div？

Question

我需要在div中使用position：absolute来设置font-awesome图标。我需要在左下角创建三角形，如图像：

我的HTML：

<div class="image-wrapper">
   <img src="image-source">
   <div class="bottom-triangle">
       <i class="fa fa-plus"></i>
    </div>
</div>

我的萨斯：

.image-wrapper {
  position: relative;

  img {
    min-width: 100%;
  }

  .bottom-triangle {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 0 0 50px;
    border-color: transparent transparent transparent $primary_color;
    bottom: 0;

    .fa-plus {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

使用此代码我在图像上有三角形，但我的字体很棒的图标位于蓝色三角形之外。

Answer 1

问题是你的.bottom-triangle没有宽度和高度，因此浏览器不知道它可以将图标放在三角形内。赋予班级宽度和高度应该可以解决问题。由于这会弄乱边框，我可能会使用伪元素，例如

.bottom-triangle {
  position: absolute;
  width: 50px;
  height: 50px;
  bottom: 0;

  &:after {
    content: ' ';
    position: absolute;
    border-style: solid;
    border-width: 50px 0 0 50px;
    border-color: transparent transparent transparent blue;
}

然后，您可以像以前一样将图标放在.bottom-triangle中 我在this JSFiddle.

中构建了一个抽象的示例