[英]Unexpected white background on font-awesome icon
当我在,包括一个字体很棒的图标时,有一个我无法删除的意外白色背景。 关于如何删除它的任何想法?
HTML代码:
<div class="notifications-window" id="close-notifications">
<div class="notifications-header">
<h4>Notifications</h4>
<button type="button" onclick="closenotifs()"><i class="fas fa-window-close"></i></button>
</div>
<div class="notifications-details">
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
</div>
CSS 代码:
.notifications-window {
width: 350px;
border: 3px solid rgb(0, 0, 0);
background-color: rgb(160, 156, 156);
color: #fff;
border-collapse: collapse;
border-radius: 5px;
text-align: center;
list-style-type: none;
display: inline-block;
}
.notifications-window p {
font-size: small;
padding: 5px;
background: rgb(141, 136, 136);
border-radius: 5px;
margin: 5px;
}
.notifications-details {
overflow-y: auto;
max-height: 350px;
}
.fa-window-close {
display: inline-block;
float: right;
justify-content: right;
cursor: pointer;
text-decoration: none;
text-align: center;
color: #000;
background-color: #fff;
border: none;
outline: none;
transition: background 250ms ease-in-out,
transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
我附上了图标样式后的样子
按钮的背景由User Agent Stylesheet
添加。 您可以在此处探索有关user agent stylesheet
更多信息。
但是,您可以通过编写自己的样式来删除按钮的背景。 为此,我为按钮编写了一个.button
类并删除了background-color: #fff;
来自您的.fa-window-close
课程。 试试这个;
CSS:
.notifications-window {
width: 350px;
border: 3px solid rgb(0, 0, 0);
background-color: rgb(160, 156, 156);
color: #fff;
border-collapse: collapse;
border-radius: 5px;
text-align: center;
list-style-type: none;
display: inline-block;
}
.notifications-window p {
font-size: small;
padding: 5px;
background: rgb(141, 136, 136);
border-radius: 5px;
margin: 5px;
}
.notifications-details {
overflow-y: auto;
max-height: 350px;
}
.fa-window-close {
display: inline-block;
float: right;
justify-content: right;
cursor: pointer;
text-decoration: none;
text-align: center;
color: #000;
/*background-color: #fff;*/
border: none;
outline: none;
transition: background 250ms ease-in-out, transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
.button {
background: transparent;
border: none;
}
HTML:
<div class="notifications-window" id="close-notifications">
<div class="notifications-header">
<h4>Notifications</h4>
<button type="button" onclick="closenotifs()" class="button"><i class="fas fa-window-close"></i></button>
</div>
<div class="notifications-details">
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.