Why my :nth-child() selector is not working with ::before-CodePudding

I was trying use the ":nth-child()" in the css to not having to make a new class everytime I want to put an icon. But when I tried the code was repeating the first icon. What do I did wrong?

<body>
    <header >
        <button  ><i></i></button>
        <img src="assets/img/logo.svg" alt="Logo H2C" >
        <button ><i></i></button>
    </header>
</body>

@font-face {
    font-family: 'icon';
    src: url(assets/font/icon.ttf);
}

body{
    background-color: #1D232A;
    font-family: 'Open Sans', 'icon', sans-serif;
    color: #FFFFFF;
}
.header-mobile{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #15191C;
    padding: 8px 16px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
}

.header-mobile__button i::before{
    display: block;
    content: "\e904";
}

.header-mobile__button i:nth-child(2)::before{
    content: "\e906";
}

.header-mobile__img{
    width: 40px;
}

CodePudding user response：

i:nth-child(2) doesn't match anything because the only <i> elements you have are the first (not the second) child of their respective buttons.