如何居中fontawesome图标的位置：绝对div？

Question

我需要在div内将position-absolute的字体真棒图标居中。 我需要在左下角制作三角形，如图所示：

我的HTML：

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

我的Sass：

.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一样将图标放置在.bottom-triangle中。
我在此JSFiddle中构建了一个抽象的示例。