title: How do I add a link inside <li> keeping li and li hover?
body: <p>When I add a link like this:</p>
  <p><code>&lt;li&gt;&lt;a href=&quot;link&quot;&gt;&lt;i class=&quot;fab fa-youtube-square&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;</code></p>
  <p>it adds a link, but it automatically displays an icon in violet color... so it doesn't even display neither <code>li</code> nor <code>li:hover</code>
  I want to have a link (<code>&lt;a href&gt;</code>) inside the <code>li</code> and still make <code>li</code> and <code>li:hover</code> work.</p>
  <p>I have this in my html. Icons are from <code>fontawesome-free@5.15.3/css/fontawesome.min.css</code> (external site css link)</p>
  <p>First Icon here is with the link, Second one <code>li:hover</code>, 3rd one - <code>li</code></p>
  <p><img src="https://i.stack.imgur.com/sPbwT.jpg" alt="" /></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>li {
    list-style: none;
    margin: 10px 30px;
    display: inline-block;
    font-size: 40px;
    padding: 20px 20px;
    color: rgb(255, 255, 255);
    border-radius: 20%;
    transition: .5s;
    animation-name: fadeIn;
    animation-duration: 15s;
  }
  
  li:hover {
    color: #cf0c57;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css"&gt;
  
  &lt;nav class="container-social item"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;i class="fab fa-youtube-square"&gt;&lt;/i&gt;&lt;/li&gt;
      &lt;li&gt;&lt;i class="fab fa-soundcloud"&gt;&lt;/i&gt;&lt;/li&gt;
      &lt;li&gt;&lt;i class="fab fa-instagram-square"&gt;&lt;/i&gt;&lt;/li&gt;
      &lt;li&gt;&lt;i class="fab fa-facebook-square"&gt;&lt;/i&gt;&lt;/li&gt;
      &lt;li&gt;&lt;i class="fab fa-twitter-square"&gt;&lt;/i&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>