I'm creating an anime list using Django. You can see this list in the 2-columns table. You can add titles and next to them you can set the status by selecting one of Font Awesome icons in the dropdown menu created by using HTML tags select and option.
The problem is when I want to select one of the icons I can't see what icon I choose. Instead of it, there are some squares. The problem appears on Firefox but on Chrome it doesn't exist. Besides the dropdown menu, icons display normally.
Part of index.html code:
<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"></option>
<option value="fas fa-times"></option>
<option value="fas fa-flag"></option>
<option value="fas fa-circle"></option>
</select>
</form>
</td>
</tr>
{% endfor %}
</table>
I've found that maybe I should do something with Access-Control-Allow-Origin. I tried to add some code like here in the first answer or download the add-on 'Allow CORS: Access-Control-Allow-Origin' but both of them failed.
So what do I have to do so icons in the dropdown menu will display on Firefox?
