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.stack.imgur.com/bfBW6.png

score 0 · Accepted Answer · answered Jun 21 '21 at 19:10

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>

ah, that worked, thank you so much but is it not same as removing those elements in the .fa-window-close itself? why doesn't it work that way? — Groot, Jun 21 '21 at 19:30
I am happy that it worked for you. You need to [Accept Answer](https://stackoverflow.com/help/someone-answers) — Ishtiaq, Jun 21 '21 at 21:02

Unexpected white background on font-awesome icon

1 Answers1