文字背後的字體真棒圖標

Question

我想讓圖標顯示在一些文字後面，但它不工作。 我已經使用了該圖標的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> 

但文字只是出現在後面的圖標。 我嘗試過使用：之前，它仍然無法正常工作。

這裏是我的問題的codepen：

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

，這裏是一個在那裏我將它設置：前

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

人知道如何解決這個問題？

Answer 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>

Answer 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>

查看預覽全部屏幕：

Answer 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; 
}