How to display Icon in select options tag

Question

Need to display Font Awesome in select options tag?

If i use outside Its working <i class="fas fa-chart-pie"></i> But how can i display it in tag instead if text

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

Can you please help me out ?

Solution

You can't use (icon tag) inside (option tag), but you can do it differently like use class='fa' in select and icon classes in option's value. It's fully working in my case.

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

If this is not working please ensure this

.fa option {

    font-weight: 900;
}

Hope this helps you. Better I would suggest you dashing frontend framework Materialize CSS select in this link.. I have been using it for my frontend works.

Comments

[jifb]

There is an issue with this in Firefox - see bugzilla.mozilla.org/show_bug.cgi?id=1345793