Каретка Font Awesome 6 не отображается ⇐ CSS

[Anonymous]

У меня есть поле выбора, в котором я хочу, чтобы отображалась каретка Font Awesome 6.
Теперь у меня есть этот код, но каретка не отображается, даже несмотря на то, что Font Awesome 6 успешно загружен на сайт. Посмотрите это вживую здесь. Почему не показывает?
PS. Я хочу сделать это с помощью чистого CSS, а не путем изменения структуры HTML элемента select, чтобы он применялся везде.


Choose an option
14
14.5




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


Подробнее здесь: https://stackoverflow.com/questions/781 ... ot-showing