Select2 with FontAwesome
Wed May 03 2023 09:02:18 GMT+0000 (Coordinated Universal Time)
Saved by
@mindplumber
#javascript
#select2
#fontawesome
<select class="select2-icon" name="icon">
<option value="fa-user" data-icon="fa-user">user</option>
<option value="fa-user-circle" data-icon="fa-user-circle">user-circle</option>
<option value="fa-user-tie" data-icon="fa-user-tie">user-tie</option>
<option value="fa-user-secret" data-icon="fa-user-secret">user-secret</option>
<option value="fa-user-ninja" data-icon="fa-user-ninja">user-ninja</option>
</select>
<script>
function formatText (icon) {
return $('<span><i class="fas ' + $(icon.element).data('icon') + '"></i> ' + icon.text + '</span>');
};
$('.select2-icon').select2({
width: "50%",
templateSelection: formatText,
templateResult: formatText
});
</script>
content_copyCOPY
Adding icons to Select2 choices
Comments