Font Awesome 6 胡萝卜未显示

Question

我选择了要显示 Font Awesome 6 胡萝卜的位置：

我现在有了这段代码，但胡萝卜没有显示，即使 Font Awesome 6 已成功加载到网站上。 在这里观看直播。为什么不显示？ 附言。我想通过纯 CSS 来完成此操作，而不是通过更改

select

元素的 HTML 结构，以便它适用于任何地方。

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

Answer 1

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

/* 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'; /* Make sure this is the correct font family name */
  font-weight: 900; 
  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;
}