html - 如何将 fontawesome 图标置于位置 :absolute div? 的中心

Question

我需要将 font-awesome 图标置于 div 内，position:absolute。我需要在左下角制作三 Angular 形，如图所示:

我的 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%);
    }
  }
}

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

Answer 1

问题是您的 .bottom-triangle 没有宽度和高度，因此浏览器不知道它可以将图标放置在三 Angular 形内部。给类一个宽度和高度应该可以解决问题。因为这会扰乱边框，所以我可能会使用伪元素，例如

.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. 中构建了一个抽象示例