Javascript 选择菜单中的字体

我想在我的选择菜单中添加图标。在其中一个堆栈溢出页面中，我发现我可以使用Fontawesome并将图标作为文本插入。我把剧本放在开头。当我试图在选择菜单中使用图标时，它不起作用。但它在选择菜单之外工作得非常好。是否可以在选择菜单选项中插入图标，或者根本无法插入？我怎么做

有一个链接指向字体页面：

这是我尝试的一个片段

卡车 卡车

---

这是HTML的一个限制。select和option元素是HTML固有的，不能在其中显示HTML

您需要使用HTML、CSS+JavaScript模拟select元素，然后将该值映射到隐藏的输入元素（如果您将其用作表单的一部分）

<ul class="select">
    <li class="option"><i class="fas fa-truck">Truck</i></li>
    <li class="option"><i class="fas fa-star">Star</i></li>
    <li class="option"><i class="fas fa-user">User</i></li>
</ul>

这有助于深入了解下拉列表的交互方面，因此它不仅仅显示为列表：

这是我的解决方案

默认情况下，i标记从HTML中的选项中剥离

按以下方法添加图标

 <option>&#xf0d1; Truck</option>

将Arial字体替换为您的网站字体名称

将中间代码替换为您选择的图标代码

'&x'+'f0d1'fontawsome卡车图标代码+

通过右键单击图标并检查图标i标记的before伪元素，可以找到图标代码

选择，选项{ 字体系列：“Arial”，“font Awesome 5 Pro”； 字号：900； } 卡车 &xf0d1；卡车 &xf0d1；卡车 &xf0d1；卡车 &xf0d1；卡车

---

非常感谢。效果很好。有趣的是，它在除Mozilla Firefox之外的所有浏览器中都能出色地工作：DI刚刚注意到您的解决方案在移动电话中不起作用。你知道为什么会这样吗？有一张图片显示了它在手机中的外观：。值得一提的是，我在手机中使用了DCoder应用程序来编译代码，因为StackOverflow没有在手机中显示代码片段version@vytaute我认为它在手机中不起作用，因为默认的html选择在手机中处理方式不同。换句话说，选项弹出窗口是由浏览器应用程序生成的，而不是HTML，它无权访问字体文件

select,option {
    font-family: 'Arial', 'Font Awesome 5 Pro';
    font-weight: 900;
}