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

时间:2019-01-02 07:15:24

标签: jquery html css bootstrap-4 options

需要在选择选项标签中显示“真棒字体”吗?

如果我在其工作范围<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>

你能帮我吗?

3 个答案:

答案 0 :(得分:0)

您可以简单地将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重复的内容。

答案 1 :(得分:0)

您不能在(option标签)内使用(icon标签),但是可以像在select值中的select class和icon类中使用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破破烂烂。我一直在将其用于前端工作。

Image worked for me

答案 2 :(得分:0)

尝试一下:

@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>