Create HTML Select Option with Icons using FontAwesome

Post Views: 594

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.

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: