font-awesome 图标上意外的白色背景

Question

当我，包括一个很棒的字体图标，有一个我无法删除的意想不到的白色背景。关于如何删除它的任何想法？

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

我附上了图标在样式化后的样子

https://i.stack.imgur.com/bfBW6.png

Answer 1

按钮的背景由User Agent Stylesheet添加。您可以探索更多关于 user agent stylesheet here.

但是您可以通过编写自己的样式来删除按钮的背景。为此，我为按钮写了一个 .button class，并从你的 .fa-window-close class 中删除了 background-color: #fff;。试试这个；

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>

font-awesome 图标上意外的白色背景

Unexpected white background on font-awesome icon

html

css

icons

font-awesome

styling