Font Awesome Icon in Select Option

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

Icons in Html Select Options

I use Fontawesome version 4.7.0

Add font-family to #view_type_sorting

#view_type_sorting{
  font-family:"FontAwesome";
}

#view_type_sorting{
  font-family:"FontAwesome";
  font-size:14px;
}
#view_type_sorting::before{
  vertical-align:middle;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sort_filter_container">
    <div class="form-group">
        <form name="view_type_sorting" class="form-group">
            <select style="text-align-last: center;font-weight: 600;margin-right: 0;vertical-align: text-bottom;" id="view_type_sorting" aria-haspopup="true" aria-expanded="false" name="view_type_sorting">
                <option id="list_asc_price" name="list_asc_price" value="list_asc_price"> Github  </option>
                <option id="list_desc_price" name="list_desc_price" value="list_desc_price"> GitLab  </option>
                <option id="list_asc_alpha" name="list_asc_alpha" value="list_asc_alpha"> Whatsapp </option>
                <option id="list_desc_alpha" name="list_desc_alpha" value="list_desc_alpha"> Google Plus  </option>
                <option id="list_default" name="list_default" value="list_default"> Facebook  </option>
            </select>
        </form>
    </div>
</div>

Font Awesome Icon Not Showing In Selectbox

Are you aware that the eot font format is only supported by Internet Explorer?

You should probably embed the woff/woff2 version.

As soon as I change eof to woff or woff2 in the CDN URL you are loading the font from, it works fine in my Chromium-based browser - https://jsfiddle.net/bwj04qr2/

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

@font-face {
  font-family: "FontAwesome 5 Free";
  src: url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0");
}

<select>
  <option value="public">Hi, </option>
</select>

How to select font awesome icon from options

https://jsfiddle.net/r62p5zas/
example code is here
In html part u need to integrate and change font of select with font awesome then u chan show icons in select item

select{
        font-family: fontAwesome
    }

After that u can give onchange event to your select and give value as font name and u need to write code of fonts in options.

<select id="dropdown" onchange="chantestge()">

    <option value='fa-wifi'> Wifi</option>
     <option value='fa-battery-full'> Battery</option>
</select>
<div id="feedback"></div>

then is js part u can use jquery and with html code put your result with create icon

function chantestge(){

  $("#feedback").html("<i class='fa "+$("#dropdown").val()+"'></i>");
}

Add font-awesome icon to option in select

Since font-awesome icons are fonts, they can be added to options by Unicode:

<script src="//unpkg.com/angular/angular.js"></script><link rel="stylesheet" href="//unpkg.com/font-awesome/css/font-awesome.css">  <body ng-app>    <i class="fa fa-camera-retro"></i> fa-camera-retro<br>    <select ng-model="choice" class="fa">      <option value="">Choose</option>      <option value=" camera"> camera</option>      <option value=" bell"> bell</option>      <option value=" bicycle"> bicycle</option>    </select>    <br>    Choice = <span class="fa">{{choice}}</span>    <br><span class="fa">--</span>  </body>

Font Awesome Icon in Select Option