Unexpected white background on font-awesome icon

Question

When I'm, including a font-awesome icon, there's this unexpected white background that I can't remove. Any ideas on how to remove it?

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

I'm attaching an image of how the icon looks like after styling

https://i.sstatic.net/bfBW6.png

Answer 1

The background of the button is added by User Agent Stylesheet. You can explore more about user agent stylesheet here.

However you can remove the background of the button by writing your own styles. For this I wrote a .button class for button and also removed background-color: #fff; from your .fa-window-close class. Try this out;

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>