Значки Font Awesome не отображаются в выпадающем меню из <select> <option> в Firefox

Я создаю список аниме с помощью Django. Вы можете увидеть этот список в таблице с 2 колонками. Вы можете добавить названия, а рядом с ними можно установить статус, выбрав одну из иконок Font Awesome в выпадающем меню, созданном с помощью HTML тегов select и option.

Проблема в том, что когда я хочу выбрать одну из иконок, я не вижу, какую иконку я выбираю. Вместо нее появляются какие-то квадратики. Проблема проявляется в Firefox, но в Chrome ее нет. Кроме выпадающего меню, иконки отображаются нормально.

Here you can see how it looks

Часть кода index.html:

<h2>Legenda:</h2>
<ul>
  <li>Obejrzane/przeczytane: <i class="fas fa-check"></i></li>
  <li>Nieobejrzane/nieprzeczytane: <i class="fas fa-times"></i></li>
  <li>Do obejrzenia/przeczytania: <i class="fas fa-flag"></i></li>
  <li>W trakcie oglądania/czytania: <i class="fas fa-circle"></i></li>
</ul>

<a href="{% url 'jam_app:new_title' %}">+ Dodaj tytuł</a>  
<table>
  <th>Tytuł</th>
  <th>Status</th>
  {% for title in titles %}
    <tr>
      <td>
        <a href="{% url 'jam_app:detail' title.id %}">{{ title }}</a>
      </td>
      <td>
        <form action="jam_app:index">
          <select class="fa">
            <option value="fas fa-check">&#xf00c</option>
            <option value="fas fa-times">&#xf00d</option>
            <option value="fas fa-flag">&#xf024</option>
            <option value="fas fa-circle">&#xf111</option>
          </select>
        </form>
      </td>
    </tr>
  {% endfor %}
</table>

Я обнаружил, что, возможно, мне следует что-то сделать с Access-Control-Allow-Origin. Я пытался добавить некоторый код как здесь в первом ответе или загрузить дополнение 'Allow CORS: Access-Control-Allow-Origin", но оба варианта не сработали.

Что нужно сделать, чтобы иконки в выпадающем меню отображались в Firefox?

Вернуться на верх