8

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 ?

Daniel Widdis
  • 8,424
  • 13
  • 41
  • 63
Jhansi Pasupuleti
  • 119
  • 1
  • 2
  • 7
  • Tried anything yet? Your best option is to wrap the `select` tag in a div, make the appearance of `select` tag indulge in with the wrapper `div`, put an icon in it and position it. – Deepak Kamat Jan 02 '19 at 07:18
  • 1
    Duplicate of https://stackoverflow.com/questions/19259518/how-to-use-a-bootstrap-3-glyphicon-in-an-html-select – Anji Jan 02 '19 at 07:19
  • Possible duplicate of [How to use a Bootstrap 3 glyphicon in an html select](https://stackoverflow.com/questions/19259518/how-to-use-a-bootstrap-3-glyphicon-in-an-html-select) – ElusiveCoder Jan 02 '19 at 07:20
  • 1
    Possible duplicate of [font awesome icon in select option](https://stackoverflow.com/questions/36743041/font-awesome-icon-in-select-option) – zubair khanzada Jan 02 '19 at 07:29

3 Answers3

5

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.

Image worked for me

Mobasshir Bhuiya
  • 954
  • 6
  • 20
  • There is an issue with this in Firefox - see https://bugzilla.mozilla.org/show_bug.cgi?id=1345793 – jifb Aug 31 '21 at 08:54
0

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, &#xf042;</option>
  <option>Hi, &#xf043;</option>
  <option>Hi, &#xf044;</option>
  <option>Hi, &#xf045;</option>
  <option>Hi, &#xf046;</option>
</select>

you'r ask is duplicat with this.

ehsan_rakhshani
  • 1
  • 1
  • 1
0

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"> &#xf2bb; Line Graph</option>
    <option value="pie_chart"> &#xf2bb; Pie Chart</option>
</select>
Partho63
  • 3,117
  • 2
  • 21
  • 39