Toggle effect using i tag instead of the background property for a dropdown button

I am interested in a dropdown which does not require JS. I've found some sources online and succeeded with that. However, I would like to alter the images that I am using as dropdown "buttons" by i tags (or any better suggestion) so I can use font-awesome/line-awesome classes instead (getting the .svg requires paid licence as far as I know).

I don't know what to do with the input:checked ~ label to change to the close icon if opting for

<label for="dropOptsPost"><i class="fa fa-ellipsis-v"></i></label>

There are different images for an open/closed dropdown (an option and close icons)

(Here's the source video if anyone is interest: https://www.youtube.com/watch?v=POxn1x3kAyY&list=LL0MP0hJxTRNbF5BGnLeydYw&index=2&t=51s)

.dropdown label {
  display: block;
  cursor: pointer;
  background: url(img/closed.png) no-repeat left center;
  padding: 3rem 0 3rem 8rem;
}

/* Toggle effect */
input:checked ~ label {
  background: url(img/open.png) no-repeat left center;
}

input:checked ~ .dropdown-content {
  max-height: 100%;
}

<div class="dropdown drop-container">
      <input type="checkbox" id="dropdownMenu">
      <label for="dropdownMenu"></label>
      <div class="dropdown-content">
        <a href="#" title="">Option 1</a>
        <a href="#" title="">Option 2</a>
        <a href="#" title="">Option 3</a>
      </div>
    </div>