6
votes

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 fonctionnement Mais comment puis-je l'afficher dans une balise à la place si du texte

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

Pouvez-vous m'aider s'il vous plaît?

jquery html css bootstrap-4 options

4 commentaires

Avez-vous encore essayé quelque chose? Votre meilleure option est d'envelopper la balise select dans un div, de faire apparaître la balise select , de vous adonner au wrapper div , de mettre une icône dedans et positionnez-le.

Duplicata de stackoverflow.com/questions/19259518/...

Copie possible de Comment utiliser un glyphique Bootstrap 3 dans un html sélectionnez

Copie possible de icône de police géniale dans l'option de sélection

3 Réponses :

0
votes

Vous pouvez simplement ajouter une icône FontAwesome à votre liste déroulante 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>

que vous demandez est dupliqué avec ceci .

0 commentaires

3
votes

Vous ne pouvez pas utiliser (icon tag) à l'intérieur de (option tag), mais vous pouvez le faire différemment comme use class = 'fa' dans les classes select et icon dans la valeur d'option. Cela fonctionne parfaitement dans mon cas.

.fa option {

    font-weight: 900;
}

Si cela ne fonctionne pas, veuillez vous en assurer

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

J'espère que cela vous aidera. Mieux, je vous suggérerais fringant cadre de frontend Materialise CSS sélectionnez dans ce lien. Je l'ai utilisé pour mes travaux frontend.

1 commentaires

@JhansiPasupuleti est généralement le bienvenu. Si cela vous a aidé, veuillez l'accepter. Cordialement Mobasshir.

0
votes

Essayez ceci:

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

@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;
}

0 commentaires