web-dev-qa-db-fra.com

Comment afficher l'icône dans la balise select options

Besoin d'afficher Font Awesome dans la balise select options?

Si j'utilise en dehors de son travail <i class="fas fa-chart-pie"></i> Mais comment puis-je l'afficher dans la balise à la place si le texte

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

Pouvez vous me donner un coup de main ?

jqueryhtmlcssbootstrap-4options
4
Jhansi Pasupuleti

Vous pouvez simplement ajouter une icône FontAwesome à votre liste déroulante de sélection sous forme de texte. Vous n'avez besoin que de quelques éléments en CSS uniquement, le CSS FontAwesome et l'unicode. Par exemple :

 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>

vous demandez est duplicat avec this .

0
ehsan_rakhshani

Essaye ça:

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