<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zt4ePEMz5bAHV5RlEz53rL3bIMn4OK1Fq0z5PT2ZlSA0cNT6uWqV4H7UoLF77pg9" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-HbA8Oce0pP0D9vfiv74FOBo1BnbW8RxEFRuhFYuqJ04aMFugB24+5alrR94Qz8GG" crossorigin="anonymous">
<title>Multi Select with Icons</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-6">
<label for="multiSelect">Select Items:</label>
<select id="multiSelect" class="form-select" multiple>
<option value="1"><i class="fas fa-car"></i> Car</option>
<option value="2"><i class="fas fa-bicycle"></i> Bicycle</option>
<option value="3"><i class="fas fa-motorcycle"></i> Motorcycle</option>
<option value="4"><i class="fas fa-bus"></i> Bus</option>
<option value="5"><i class="fas fa-truck"></i> Truck</option>
</select>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-bAdVp9a1KqYASgVYK3q8U+o5K9X1brYVn8a6D3fW31UcYhl5f0BcPxmYIt3LzUJww" crossorigin="anonymous"></script>
</body>
</html>