Html Font Awesome 6插入符号未显示

我有一个 Select 框，我想在其中显示一个Font Awesome 6 caret.

我现在有这个代码，但插入符号不显示，即使认为字体真棒6是成功加载在网站上. See it live here.为什么不显示？

PS.我希望通过纯CSS来实现这一点，而不是通过更改select元素的HTML struct 来使其适用于任何地方.

    <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>

    /* 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;
    }