why I set i::before then FontAwesome will disappear-CodePudding

My English is weak, and below is my question.

I would like creat a menu buttom(mobile style), I have a question somewhere, when I set

.menu-btn i::before{content: "\f00d";} will cover <i ></i>, I want to knew why?

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
} 

nav{
    height: 80px;
    background-color: black;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px 0 100px;
}

nav ul{
    display: flex;
    list-style-type: none;
}

nav .logo{
    font-weight: 600;
    font-size: 35px;
}

nav ul li{
    margin: 0 10px
}

nav ul li a{
    text-decoration: none;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 18px;
    padding: 5px 10px;
    border-radius: 5px;
}

nav ul .active a,
nav ul li a:hover{
    color: black;
    background-color:#fff;

}

nav #click,
nav .menu-btn i{
    display: none;
    font-size: 26px;
    cursor: pointer;
    
}


@media screen and (max-width:768px) {


    nav .menu-btn i{
        display: block;

    }

    nav #click:checked ~ .menu-btn i::before{
        content: "\f00d";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;    
    }



    nav #click:checked ~ ul{
        left: 0;
        transform: all 1s ease;
    }

    nav ul{
        display: block;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 80px;
        left: 100%;
        background-color: black;
        text-align: center;
        
    }

    nav ul li{
        margin: 50px 0;
    }

    nav ul .active a,
    nav ul li a:hover{
    color: skyblue;
    background-color: black;
    }


}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/6c92ff04b8.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
    <link rel="stylesheet" href="20220319.css">
    <title>20220319-navbar</title>
</head>
<body>
    
    <nav>
        <div >Brand</div>

        <input type="checkbox" id="click">
        <label for="click" >
            <i ></i>         
        </label>
        <ul>
            <li ><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Servises</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Feedback</a></li>
        </ul>
    </nav>

</body>
</html>

CodePudding user response：

It's because your setting has a higher specificity than the one that the Fontawesome system has set.

When you apply the class fa-bars Fontawesome's CSS is:

.fa-bars:before, .fa-navicon:before {
    content: "\f0c9";
}

But you are applying:

.menu-btn i::before{content: "\f00d";}

This has higher specificity than the previous setting because of the .menu-btn

If you take that out and just have:

i::before{content: "\f00d";}

the hamburger icon will be shown.

You can read more about specificity on MDN

CodePudding user response：

We are using a font called font-awesome. In that font, the character \f0c9 means a hamburger, and \f00d means the cross icon. When you change the class, for example, fa-plug it's the character on before changes to \f1e6 and so on