Customize a Select with Font-Awesome

Customize a select with font-awesome

maybe so

1) Font Awesome 4

.select {
    border: 1px solid #ccc;
    overflow: hidden; 
    height: 40px;    
    width: 240px;
    position: relative;
    display: block;
}

select{       
    height: 40px;
    padding: 5px;
    border: 0;
    font-size: 16px;       
    width: 240px;
   -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.select:after {
    content:"\f0dc";
    font-family: FontAwesome;
    color: #000;
    padding: 12px 8px;
    position: absolute; right: 0; top: 0;
    background: red;
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 100%;      
    pointer-events: none;
    box-sizing: border-box;   
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<label class="select">
    <select name="email" id="email">
        <option>aaaa1</option>
        <option>aaaa2</option>
        <option>aaaa3</option>
        <option>aaaa4</option>
        <option>aaaa5</option>
        <option>aaaa6</option>
    </select>
</label>

FontAwesome in select

<select id="wgtmsr" style="width: 230px !important; min-width: 230px; max-width: 230px; font-size: 18px; height: 59px;" name="wgtmsr";><i class="fas fa-arrow-circle-down">

<option class="_self" selected="selected" value="#">MAKES SERVICED</option>
    
</select>

<style>
#wgtmsr {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='arrow-circle-down' class='svg-inline--fa fa-arrow-circle-down fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-143.6-28.9L288 302.6V120c0-13.3-10.7-24-24-24h-16c-13.3 0-24 10.7-24 24v182.6l-72.4-75.5c-9.3-9.7-24.8-9.9-34.3-.4l-10.9 11c-9.4 9.4-9.4 24.6 0 33.9L239 404.3c9.4 9.4 24.6 9.4 33.9 0l132.7-132.7c9.4-9.4 9.4-24.6 0-33.9l-10.9-11c-9.5-9.5-25-9.3-34.3.4z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: 1em;
}
</style>

Font Awesome icon in select option

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

But you can add it after the select like this

Font awesome in select menu

Here is my solution

By default i tags are stripped from options in HTML

Add icons in the following method

 <option> Truck</option>

Also add following CSS

select,option {
    font-family: 'Arial', 'Font Awesome 5 Pro';
    font-weight: 900;
}

Replace the "Arial" font with your website font name.

Replace the middle code with the icon code of your choice

'&#x' + 'f0d1'(fontawsome truck icon code) + ;

The icon code can be found by right clicking on icon and checking the before pseudo element of the i tag of an icon.

select,option {

    font-family: 'Arial', 'Font Awesome 5 Pro';

    font-weight: 900;

}

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <script src="https://kit.fontawesome.com/9593bd7a92.js"></script>

</head>

<body>

  <i class="fas fa-truck">Truck</i>

  <br><br><br>

  <select>

    <option> Truck</option>

    <option> Truck</option>

    <option> Truck</option>

    <option> Truck</option>

  </select>

</body>

</html>

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

You can't put an <i> tag inside an <select> you can use the unicode directly inside the select and set the font with css.

HTML:

<select>
  <option selected value="fa fa-github">Github </option>
</select>

CSS:

select {
  font-family: 'Font Awesome\ 5 Brands' , 'arial'
}

Example on this jsfiddle(font awesome 5):
https://jsfiddle.net/68avuypL/

Customize a Select with Font-Awesome