font awesome icon in select option

问题:

I try to add a caret down icon to the first selection of several options as shown on the picture below:

here is a Fiddle with my example: https://jsfiddle.net/wwut6apr/30/

I can't get the icon to be visible on the Fiddle above.

And the corresponding code:

.wrapper {   height: 200px;   background-color: red;   padding-top: 100px;   padding-left: 150px; } #before-select {   font-size: 30px;   color: #ffffff; } select {   border: none;   background: transparent;   /*background-color: blue;*/   -webkit-appearance: none;   -moz-appearance: none;   appearance: none;   width: 180px;   padding-top: 0px;   background-size: 20px;   color: #ffffff;   font-size: 30px; } select option {   color: #424146;   background: #ffffff; }

    
     in      London        ParisMadrid
   
  

回答1:

You can't add i tag in option tag because tags are stripped.

But you can add it after the select like this

回答2:

You can simply add a font-awesome 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' }

Working fiddle:

https://jsfiddle.net/n31pbqog/1

The unicodes can be found when you click on an icon: http://fontawesome.io/icons

According to the comment below and issue on Github, the unicode in select elements won't work on OSX (yet).

---

Update: from the Github issue, adding multiple attribute to select element makes it work on:

OSX El Capitan 10.11.4

• Chrome version 50.0.2661.75 (64-bit)
• Sarafi version 9.1
• Firefox version 45.0.2

select{   font-family: FontAwesome, sans-serif; }

JSFiddle

回答3:

Full Sample and newer version:https://codepen.io/Nagibaba/pen/bagEgx

select {   font-family: 'FontAwesome', 'sans-serif'; }

回答4:

I recommend for you to use Jquery plugin selectBoxIt selectBoxIt

It is nice and simple, and you can change the arrow of drop down menu.

回答5:

If you want the caret down symbol, remove the "appearence: none" it implies to remove webkit and moz- as well from select in css.

文章来源: font awesome icon in select option