<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>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter