文本后面的 Font Awesome 图标
Font Awesome icon behind text
我试图让一个图标出现在一些文本后面,但它不起作用。
我用于图标的 CSS 是 link 这个:
.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
有人知道如何解决这个问题吗?
你应该为此使用 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>
查看全屏预览:
添加相对于 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>
您只需要将 z-index : 1;
添加到 class 名称 .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;
}
我试图让一个图标出现在一些文本后面,但它不起作用。 我用于图标的 CSS 是 link 这个:
.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
有人知道如何解决这个问题吗?
你应该为此使用 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>
查看全屏预览:
添加相对于 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>
您只需要将 z-index : 1;
添加到 class 名称 .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;
}