如何在选择选项标签中显示图标答案

【问题标题】：How to display Icon in select options tag如何在选择选项标签中显示图标
【发布时间】：2019-05-28 21:06:57
【问题描述】：

需要在选择选项标签中显示 Font Awesome 吗？

如果我在其工作之外使用 <i class="fas fa-chart-pie"></i> 但是如果文本

，我怎么能在标签中显示它呢？

<select id="select_graphtype">
  <option value="line_graph"> Line Graph</option>
  <option value="pie_chart"> Pie Chart</option>
</select>

你能帮帮我吗？

【问题讨论】：

试过什么了吗？你最好的选择是将select标签包装在一个div中，让select标签的外观与包装div一起沉迷，在其中放置一个图标并定位它。
stackoverflow.com/questions/19259518/… 的副本
How to use a Bootstrap 3 glyphicon in an html select的可能重复
font awesome icon in select option的可能重复

标签： jquery html css bootstrap-4 options

【解决方案1】：

您可以简单地将 FontAwesome 图标作为文本添加到您的选择下拉列表中。你只需要 CSS 中的一些东西，FontAwesome CSS 和 unicode。例如：

 select {
 font-family: 'FontAwesome', 'Second Font name'
 }



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select>
  <option>Hi, &#xf042;</option>
  <option>Hi, &#xf043;</option>
  <option>Hi, &#xf044;</option>
  <option>Hi, &#xf045;</option>
  <option>Hi, &#xf046;</option>
</select>

您的问题与this 重复。

【讨论】：

【解决方案2】：

您不能在（选项标记）内部使用（图标标记），但您可以使用不同的方法，例如在选项值中的选择和图标类中使用 class='fa'。它在我的情况下完全有效。

<select id="select_graphtype" class="fa">
    <option value="fa fa-address-card"> &#xf2bb; line chart</option>
    <option value="fa fa-address-card"> &#xf2bb; Pie Chart</option>
</select>

如果这不起作用，请确保这一点

.fa option {

    font-weight: 900;
}

希望这对您有所帮助。更好的是，我建议你在this link. 中使用前端框架 Materialize CSS select。我一直将它用于我的前端工作。

【讨论】：

在 Firefox 中有一个问题 - 请参阅 bugzilla.mozilla.org/show_bug.cgi?id=1345793

【解决方案3】：

试试这个：

@font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style : normal;
    src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot");
    src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot") format("embedded-opentype"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff") format("woff"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf") format("truetype"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg") format("svg");
}
select {
    font-family: FontAwesome;
}

<select id="select_graphtype">
    <option value="line_graph"> &#xf2bb; Line Graph</option>
    <option value="pie_chart"> &#xf2bb; Pie Chart</option>
</select>

【讨论】：