Menu
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 ?
624
To display the images in the select drop-down we have to use javascript libraries. We can add an image in select options using "select2" jQuery library.
Using the * CSS selector you can style the options inside the box that is drawn by the system. That is true only because the all selector targets the shadow DOM innards, you can target those manually per browser. This is not true, even If you use * you can just style the background and color.
To insert an icon, add the name of the icon class to any inline HTML element. The <i> and <span> elements are widely used to add icons. All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)
A style attribute on a <select> tag assigns a unique style to the dropdown. Its value is CSS that defines the appearance of the dropdown control.
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.
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
