FA Kit Challenges: all.min.css

by David

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<ul>
  <li class="regular">Regular
    <ul>
      <li class="bullet-icon no-hikes">No Hikes</li>
      <li class="bullet-icon not-started">Not started</li>
      <li class="bullet-icon started">Started</li>
      <li class="bullet-icon halfway">Halfway</li>
      <li class="bullet-icon almost-done">Almost done</li>
      <li class="bullet-icon completed">Completed</li>
    </ul>
  </li>
  <li class="solid">Solid
    <ul>
      <li class="bullet-icon no-hikes">No Hikes</li>
      <li class="bullet-icon not-started">Not started</li>
      <li class="bullet-icon started">Started</li>
      <li class="bullet-icon halfway">Halfway</li>
      <li class="bullet-icon almost-done">Almost done</li>
      <li class="bullet-icon completed">Completed</li>
    </ul>
  </li>
</ul>

CSS

ul  { margin-left: 5px; padding-left:20px; list-style: none; font-size: small; }

/** Bullet Icons */
.bullet-icon:before { font-family: "Font Awesome 5 Free"; margin: 0 5px 0 -20px; display: inline-block; vertical-align: middle; }

/* FontAwesome has a bug where 700 is solid and 900 is regular. Remove this when they fix it */
.no-hikes:before    { content: '\f057'; color: #c0c0c0; }
.not-started:before { content: '\f056'; color: #ee7600; }
.started:before     { content: '\f111'; color: blue; }
.halfway:before     { content: '\f111'; color: blue; clip-path: polygon(50% 0%, 50% 100%, 0% 100%, 0% 0%); }
.almost-done:before { content: '\f111'; color: blue; }
.completed:before   { content: '\f058'; color: green; }

/* Problematic Stuff */
.regular li:before { font-weight: 700; }
.solid li:before { font-weight: 700; }