文字后面的字体真棒图标答案

【问题标题】：Font Awesome icon behind text文字后面的字体真棒图标
【发布时间】：2016-05-12 12:14:55
【问题描述】：

我正在尝试使某个图标出现在某些文本后面，但它不起作用。我用于图标的 CSS 是这样的链接：

.fa:not(.form-control-feedback) {
    font-size: $h1-size;
    color: lighten($brand-color-light, 10%);
    z-index: 0;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: -webkit-box; /* Safari */
    display: flex;
    align-items: center;
    justify-content: center;
}

html 是这样的：

<a ui-sref="account({ accountNumber: controller.account.accountNumber })" animated-tile>
    <i class="fa fa-user"></i>

    <div style="z-index: 2;">
        <h3>{{ controller.account.accountNumber }}</h3>
        <h5>{{ controller.account.name }}</h5>

        <p>
            {{ controller.account.address.houseName }}<br ng-if="controller.account.address.houseName.replace(' ', '')" />
            {{ controller.account.address.street }}<br ng-if="controller.account.address.street.replace(' ', '')" />
            {{ controller.account.address.town }}<br ng-if="controller.account.address.town.replace(' ', '')" />
            {{ controller.account.address.county }}<br ng-if="controller.account.address.county.replace(' ', '')" />
            {{ controller.account.address.postCode }}
        </p>
    </div>
</a>

但文字只出现在图标后面。我试过用 :before 还是不行。

这是我的问题的代码笔：

http://codepen.io/r3plica/pen/GZeLQM

这是我设置它的地方：之前

http://codepen.io/r3plica/pen/EKMJLj

有人知道如何解决这个问题吗？

【问题讨论】：

标签： css font-awesome

【解决方案1】：

添加相对于h3和p的位置，或者将它们放在一个div中并添加相对于div的位置。

.tile {
  max-width: 200px;
  height: 200px;
  color: white;
  background-color: blue;
  position: relative;
}
.tile h3,
.tile p {
  position: relative;
}
.tile .fa {
  font-size: 50px;
  color: red;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: -webkit-box;
  /* Safari */
  display: flex;
  align-items: center;
  justify-content: center;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />


<div class="container">
  <div class="row">
    <div class="col-md-3 tile">
      <i class="fa fa-user"></i>
      <h3>This is a test</h3>
      <p>This is an issue when the text is behind the actual font-awesome icon. Does anyone know how to solve it?</p>
    </div>
  </div>
</div>

【讨论】：

我已将您的答案标记为其余部分的答案，因为我唯一需要的是使文本（或包含 div）相对，并且您是唯一一个说它的人，尽管其他人实际上有它在他们的解决方案中，他们从未说过这就是我真正需要的。

【解决方案2】：

您应该为此使用z-index，因为::after 或::before 只是伪元素的名称，而且，因为您使用的是position: absolute：

.tile {
  height: 200px;
  color: white;
  background-color: blue;
}

.tile .fa {
  font-size: 50px;
  color: red;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  /* Safari */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.tile p {
  position: relative;
  z-index: 10;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="container">
  <div class="row">
    <div class="col-md-3 tile">
      <i class="fa fa-user"></i>
      <h3>This is a test</h3>
      <p>This is an issue when the text is behind the actual font-awesome icon. Does anyone know how to solve it?</p>
    </div>
  </div>
</div>

全屏查看预览：

【讨论】：

【解决方案3】：

只需将z-index : 1; 添加到类名.tile .fa {....} 并添加此css .tile p { z-index : 2; position: absolute; } 或
将下面的 css 复制并粘贴到您当前的 css 中将解决问题

.tile .fa {
  font-size: 50px;
  color: red;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  /* Safari */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index : 1 ;
}

.tile p {
  z-index : 2;
  position: absolute;
}

【讨论】：