Is there a way to remove the unexpected white background that appears when adding a font-awesome icon?
Here is the HTML code:
<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 Code:
.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;
}
Take a look at this image to see how the icon looks after styling