How would I place a font-awesome icon into a select drop-down menu?

Question

I've been battling with trying to place a font-awesome icon into a select option (drop down menu). I have tried the solution here that was posted on this site. However, this places the font-awesome icon next to the label and not within the select option box.

I've also tried putting in the unicode directly into the html option tag... however, once clicked on that down arrow it turns into a question mark. (Also, I cannot use bootstrap with this project)

Please help!

HTML:

<div class="modal-form stack col75">
    <label for="game">Game:</label>
    <select class="form-control easy-drop-down" id="modal-game-options"> 
        <option selected disabled>Please Select a Show</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</div>

CSS:

select {
  border-radius: 0;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  -webkit-appearance: none;
  background-color: white;
  padding-left: 20px;
  content: "";
}

Here are some snapshots

Current: without-arrow

Goal: with-arrow

Answer 1

i have made some changes to @ DarkHyudrA'sanswer..

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
select {
  border-radius: 0;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  -webkit-appearance: none;
  background-color: white; padding:8px 10px; border-radius:2px; border:#ADD8E6 solid 1px; 
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:35px}
}

label {position:relative}
label:after {
    content:"\f078";   
    font-family: "FontAwesome";
    font-size: 10px;
    color:#aaa;
    right:10px; top:3px;
    padding:0 0 1px;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:4px; top:0px;
    width:20px; height:16px;
    background:#fff;
    position:absolute;
    pointer-events:none;
    display:block;
}
</style>


<div class="modal-form stack col75">
<div class="modal-form stack col75">
    <label for="game">Game:
    <select class="form-control easy-drop-down" id="modal-game-options"> 
        <option selected disabled>Please Select a Show</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    </label>
</div>
</div>

here is th fiddle

https://jsfiddle.net/cnaysvc5/

Answer 2

What you made wrong that the link actually does:

1- The label doesn't end before the select, it ends after.

2- The label is used to generate the font-awesome icon with the content trough the after sub selection.

HTML

<div class="modal-form stack col75">
    <label for="game">Game:
    <select class="form-control easy-drop-down" id="modal-game-options"> 
        <option selected disabled>Please Select a Show</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    </label>
</div>

CSS

select {
  border-radius: 0;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  -webkit-appearance: none;
  background-color: white;
  width: 175px;
}

@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:3px;
    padding:0 0 1px;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:4px; top:0px;
    width:20px; height:16px;
    background:#fff;
    position:absolute;
    pointer-events:none;
    display:block;
}

https://jsfiddle.net/01b9Lh1g/

Answer 3

Here is my code. You should try this.

HTML code

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<label>
    <select id="international"> 
        <option value="tests" selected="selected">Select Option</option>
        <option value="tests.au">Option 1</option>
        <option value="tests.br/">Option 2</option>
        <option value="tests">Option 3</option>
    </select>
</label>

CSS Script

<style>
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;
}
</style>

Answer 4

i tried your code by removing the "selected disabled" from the first option tag.it worked perfectly for me.

<div class="modal-form stack col75">
    <label for="game">Game:</label>
    <select class="form-control easy-drop-down" id="modal-game-options"> 
        <option >Please Select a Show</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</div>