Snippets Collections
var placeholder = "&#xf002 Select a place";
$(".select2").select2({
  placeholder: placeholder,
  escapeMarkup: function(m) { 
    return m; 
  }
});
<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>
star

Wed May 03 2023 09:07:39 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/35405269/select2-font-awesome-icon-on-placeholder

#javascript #select2 #fontawesome
star

Wed May 03 2023 09:02:18 GMT+0000 (Coordinated Universal Time)

#javascript #select2 #fontawesome

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension