I am using FontAwesome icons as selection options. This works how it should be but only in Chrome or Edge. Firefox instead have trouble to translate those icons. The final selection is fine but the selection items are not displayed correctly.
Is there any solution for my problem? I am using Firefox v.96.0.1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iDep v0.5.4.4</title>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/02d2592ebb.js" crossorigin="anonymous"></script>
</head>
<style>
#custom-select {
position: absolute;
text-align-last: center;
font-family: fontAwesome;
}
</style>
<body>
<select id="custom-select">
<option value="fas fa-arrow-right">R</option>
<option value="fas fa-arrow-left">L</option>
</select>
</body>
</html>