title: why I set i::before then FontAwesome will disappear
body: <p>My English is weak, and below is my question.</p>
  <p>I would like creat a menu buttom(mobile style), I have a question somewhere, when I set</p>
  <p><code>.menu-btn i::before{content: &quot;\f00d&quot;;}</code> will cover <code>&lt;i class=&quot;fa-solid fa-bars&quot;&gt;&lt;/i&gt;</code>, I want to knew why?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&amp;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;
      }
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;script src="https://kit.fontawesome.com/6c92ff04b8.js" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="20220319.css"&gt;
      &lt;title&gt;20220319-navbar&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      
      &lt;nav&gt;
          &lt;div class="logo"&gt;Brand&lt;/div&gt;
  
          &lt;input type="checkbox" id="click"&gt;
          &lt;label for="click" class="menu-btn"&gt;
              &lt;i class="fa-solid fa-bars"&gt;&lt;/i&gt;         
          &lt;/label&gt;
          &lt;ul&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Servises&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Feedback&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>