Font Awesome 6 caret not showing

Question

I have a select box in which I want a Font Awesome 6 caret to show.

I now have this code, but the caret 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.

    <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

select:after - does not work. You have a separate block for the arrow, so style it:

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

#pa_ring-size {
  --padding:10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  height: var(--height);
  padding: 0 calc(var(--height) + var(--padding)) 0 var(--padding);
}

.select-arrow {
  position: absolute;
  inset: 0 0 0 auto;
  width: var(--height);
  display: grid!important;
  place-items: center;
  pointer-events: none;
  font-size: 0!important;
  color: black!important;
}

.select-arrow:before {
  content: "\f0d7";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 16px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/>
<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>

Answer 2

I think, it might be a font family issue.

/* 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 Awesome icon code for caret */
  font-family: 'fas';  /* Assuming you're using the free version */
  font-weight: 900; 
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

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

Answer 3

why didn't you use this method?

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

Answer 4

Are you sure that you have installed Fontawesome 6 correctly? Because it isn't working. . I tried using Fontawesome 5 Free and it is working fine.

Just add the following code to this file (or add the code through Custom CSS option of the theme) -> https://www.zomoa.com/wp-content/themes/Avada-Child-Theme/style.css?ver=6.4.3

.select-arrow:after {
        color: black;
        content: '\f0d7';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
}  
    

Update:

You definitely haven't installed 'Fontawesome 6" correctly. The icon at zomoa.com/faq is not from your Fontawesome 6 Pro, it is likely from the local version used by Avada. I tried using the fontawesome 6.5.1 Free script from here- https://cdnjs.com/libraries/font-awesome and it worked fine.

To check it out-

You have to add the following stylesheet to the <head> of your document (How to)-

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Then add the following code to this file (or add the code through Custom CSS option of the theme) -> https://www.zomoa.com/wp-content/themes/Avada-Child-Theme/style.css?ver=6.4.3

.select-arrow:after {
        color: black;
        content: '\f0d7';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
}