Font Awesome 6 插入符号未显示

Question

我有一个选择框，我想要在其中显示 Font Awesome 6 插入符。

我现在有了这段代码，但插入符号没有显示，即使 Font Awesome 6 已成功加载到网站上。 在这里观看直播。为什么不显示？

PS。我想通过纯 CSS 来完成此操作，而不是通过更改

select

元素的 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>

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

Answer 1

我认为，这可能是字体系列问题。

#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: '▼'; /* Unicode for a down-pointing triangle */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Additional style for the parent container */
.avada-select-parent {
  position: relative;
  display: inline-block;
}

Answer 2

为什么不使用这个方法？

<option value="14" class="attached enabled">14 <i class="fa-solid fa-caret-down"></i></option>