Is it possible to use Font Awesome icon instead to select default drop down sign

Question

I would like to use font awesome "fa-chevron-down" icon instead of html select box default style. Please see the attached image.

Answer 1

You can do this with pseudo classes. I followed the steps here and modified by removing the transforms, using FontAwesome as my font, and the UTF-8 for the icon as the content as instructed here:

select {
padding:4px;
margin: 0;
background: #fff;
color:#888;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
width: 150px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:18px}
}

label {position:relative}
label:after {
content:"\f078";   
font-family: "FontAwesome";
font-size: 11px;
color:#aaa;
right:8px; top:4px;
padding:0 0 2px;
position:absolute;
pointer-events:none;
}
label:before {
content:'';
right:4px; top:0px;
width:23px; height:18px;
background:#fff;
position:absolute;
pointer-events:none;
display:block;
}

Here's a codepen in action.