I am using select2 for html select and I want to show fontawesome icon with option value but in frontend view.
However, only the option value is showing - the icon is not showing. I am very confused why this is?
$('#icon-name').select2() <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<select id="icon-name" name="icon" type="text" placeholder="Select Icon" class="js-example-
basic-single" style="width:100%">
<option value="" selected>Select Icon</option>
<option value="ad"><i class="fa fa-ad"></i> fa fa-ad</option>
<option value="address-book"><i class="fa fa-address-book"></i>fa fa-address-book</option>
<option value="address-card"><i class="fa fa-address-card"></i> fa fa-address-card</option>
<option value="adjust"><i class="fa fa-adjust"></i> fa fa-adjust</option>
<option value="air-freshener"><i class="fa fa-air-freshener"></i>fa fa-air-freshener
</option>
</select>the frontend view is like this
