Create HTML Select Option with Icons using FontAwesome

  • by
html-select-with-icons-css-sample

In this post we will create a HTML Select control along with custom icons. For icons FontAwesome CSS is used in this example select control. Additionally bootstrap and jquery is also used. Whenever user will select an option, the selected option-item along with its icon will be set as value. Also additional css is also used for making UI rich and attractive.

html-select-with-icons-css-sample

DOWNLOAD SOURCE CODE

HTML Select Option:

<div class="main">
<div class="dropdown" id="dropdown">
<div href="#" class="dropdown-toggle" data-toggle="dropdown">
<span id="options-display">Options</span>
<b class="caret"></b>
</div>

<ul class="dropdown-menu" id="options">
<li data-value="Android">
<a href="#"><i class="fab fa-android"></i> Android</a>
</li>
<li data-value="Angular">
<a href="#"> <i class="fab fa-angular"></i> Angular</a>
</li>
<li data-value="Amazon">
<a href="#"><i class="fab fa-amazon"></i> Amazon</a>
</li>
<li data-value="AWS">
<a href="#"><i class="fab fa-aws"></i> AWS </a>
</li>
<li data-value="Bitcoin">
<a href="#"><i class="fab fa-bitcoin"></i> Bitcoin</a>
</li>
<li data-value="HackerRank">
<a href="#"><i class="fab fa-hackerrank"></i> HackerRank</a>
</li>
<li data-value="JavaScript">
<a href="#"><i class="fab fa-js"></i> JavaScript</a>
</li>
<li data-value="Linux">
<a href="#"><i class="fab fa-linux"></i> Linux</a>
</li>
<li data-value="StackOverflow">
<a href="#"><i class="fab fa-stack-overflow"></i> StackOverflow</a>
</li>
<li data-value="Windows">
<a href="#"><i class="fab fa-windows"></i> Windows</a>
</li>
</ul>
</div>
</div>

The data-value of the selected li option will be set for the span options-display. Using JavaScript will be identify the i element’s class and attach it to the selected value.

Javascript:

<script>

$('#options').on('click','li', function(e) {
$('#dropdown').click();

var element = $(this).html();
var i = $('i', element).attr('class');

var val = "<i class='"+i+"'></i> &nbsp;";
$('#options-display').html(val + $(this).data('value') );
});
</script>

Complete code with CSS:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<title>Dropdown with icons - CSS</title>
<style>
* {
margin: 0;
padding: 0;
}

body {
background: rgb(149, 147, 176);
background: linear-gradient(286deg, rgba(149, 147, 176, 1) 0%, rgba(219, 219, 233, 1) 53%, rgba(127, 134, 251, 1) 100%);
padding: 100px;
}

.dropdown {
width: 200px !important;
padding: 5px;
border: 1px solid #a8a8a8;
border-radius: 0px;
font-size: 18px;
background-color: #fff;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none !important;
color: #ffffff;
background-color: #fc2864 !important;
background-image: none !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.dropdown-toggle,
.dropdown-menu {
width: 100% !important;
}

main {
margin: 50px;
}

.dropdown a {
text-decoration: none;
color: #000;
}

.caret {
float: right;
height: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="dropdown" id="dropdown">
<div href="#" class="dropdown-toggle" data-toggle="dropdown">
<span id="options-display">Options</span>
<b class="caret"></b>
</div>

<ul class="dropdown-menu" id="options">
<li data-value="Android">
<a href="#"><i class="fab fa-android"></i> Android</a>
</li>
<li data-value="Angular">
<a href="#"> <i class="fab fa-angular"></i> Angular</a>
</li>
<li data-value="Amazon">
<a href="#"><i class="fab fa-amazon"></i> Amazon</a>
</li>
<li data-value="AWS">
<a href="#"><i class="fab fa-aws"></i> AWS </a>
</li>
<li data-value="Bitcoin">
<a href="#"><i class="fab fa-bitcoin"></i> Bitcoin</a>
</li>
<li data-value="HackerRank">
<a href="#"><i class="fab fa-hackerrank"></i> HackerRank</a>
</li>
<li data-value="JavaScript">
<a href="#"><i class="fab fa-js"></i> JavaScript</a>
</li>
<li data-value="Linux">
<a href="#"><i class="fab fa-linux"></i> Linux</a>
</li>
<li data-value="StackOverflow">
<a href="#"><i class="fab fa-stack-overflow"></i> StackOverflow</a>
</li>
<li data-value="Windows">
<a href="#"><i class="fab fa-windows"></i> Windows</a>
</li>
</ul>
</div>
</div>
</body>

<script>
$("#options").on("click", "li", function (e) {
$("#dropdown").click();

var element = $(this).html();
var i = $("i", element).attr("class");

var val = "<i class='" + i + "'></i> &nbsp;";
console.log(val);
$("#options-display").html(val + $(this).data("value"));
});
</script>
</html>

Now open the HTML file in browser.
Output:

html-select-with-icons-css-sample

 

html-select-with-icons-selected-option-sample

 

DOWNLOAD SOURCE CODE

Also see:

Creating a simple online notepad with JavaScript and HTML

Javascript – Remove or Delete items from Array

How to create random color generator and picker in JavaScript

Create a simple Login form using only HTML and CSS

HTML JavaScript notifications using jQuery

Center a div using CSS

Creating Digital Clocks using HTML, CSS and JavaScript

See more on Javascript

See more on HTML

Thank you!


  1. Base64Encode.io - Realtime Encode your string to Base64 format.
  2. Base64Decode.io - Realtime Decode Base64 data to plain text.
  3. Md5Hash.io - Realtime Encoding in Md5Hash.