Font Awesome 5 Pseudo

Problems with external link icon in

by Jens Kühn

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<nav>
  <ul>
    <li>
      <a href="#">
        <i class="fas fa-server"></i>
        <aside>
          <h2>
            Servers with Critical Issues
          </h2>
          <h1>
            12 <b>Servers</b>
          </h1>
          <p>
          There is a realistic threat that your data can be stolen or deleted
          </p>
        </aside>
      </a>
    </li>
    <li class="active">
      <a href="#">
        <i class="fas fa-server"></i>
        <aside>
          <h2>
            Servers with Critical Issues
          </h2>
          <h1>
            12 <b>Servers</b>
          </h1>
          <p>
          There is a realistic threat that your data can be stolen or deleted
          </p>
        </aside>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fas fa-server"></i>
        <aside>
          <h2>
            Servers with Critical Issues
          </h2>
          <h1>
            12 <b>Servers</b>
          </h1>
          <p>
          There is a realistic threat that your data can be stolen or deleted
          </p>
        </aside>
      </a>
    </li>
  </ul>
</nav>

SCSS

nav {
  ul {
    list-style: none;
    background: #929292;
   
    width: 300px;
    padding: 10px 0 10px 20px;
  }
  li {
    width: 280px;
    
    padding: 10px;
    
    &.active {
      background: #fff;  
    }
    
    a {
      display: flex;
      justify-content: flex-start;
      text-decoration: none;
      color: #000;
    
      i {
        width: 50px;
      }
    
      h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 200;
        b {
          padding-left: 5px;
          font-weight: 700;
        }
      }
      
      h2 {
        margin: 0;
        font-size: 18px;
      }
      p {
        margin: 0;
        font-size: 12px;
        color: #929292;
      }
    }
  }
}