Is It Possible To Use Font Awesome Icon Instead To Select Default Drop Down Sign

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

Solution 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:002px;
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.