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 ?
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">  line chart</option>
<option value="fa fa-address-card">  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.
You can simply add a FontAwesome icon to your select dropdown as text. You only need a few things in CSS only, the FontAwesome CSS and the unicode. For example :
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, </option>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
</select>
you'r ask is duplicat with this.
Try This:
@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">  Line Graph</option>
<option value="pie_chart">  Pie Chart</option>
</select>