Html – Font Awesome 6 carrot not showing

I have this select where I want a Font Awesome 6 carrot to show:

I now have this code, but the carrot does not show, even thought Font Awesome 6 is successfully loaded on the site. See it live here. Why is it not showing?
PS. I want to to do this via pure CSS and not via changing the HTML structure of the select element so it applies everywhere.

HTML

<div class="avada-select-parent">
    <select id="pa_ring-size" class="" name="attribute_pa_ring-size" data-attribute_name="attribute_pa_ring-size" data-show_option_none="yes">
        <option value="">Choose an option</option>
        <option value="14" class="attached enabled">14</option>
        <option value="14-5" class="attached enabled">14.5</option>
    </select>
    <div class="select-arrow" style="height: 38.4px; width: 38.4px; line-height: 38.4px;"></div>
</div>

CSS

/* Style for the select box */
#pa_ring-size {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  border: 1px solid #ddd;
  padding: 10px 40px 10px 10px;
  border-radius: 5px;
  font-size: 16px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* Style for the select arrow using ::after pseudo-element */
#pa_ring-size::after {
  content: 'f0d7'; 
  font-family: 'Font Awesome 6 Pro';
  font-weight: 900; 
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.avada-select-parent {
  position: relative;
  display: inline-block;
}