thiscodeWorks - Organizing the best of code online

var placeholder = "&#xf002 Select a place";
$(".select2").select2({
  placeholder: placeholder,
  escapeMarkup: function(m) { 
    return m; 
  }
});

#javascript #select2 #fontawesome

Select2 with 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>

##html ##css #javascript #fontawesome #bulma #boilerplate #imports

Boilerplate & Imports

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>

	/* CSS STYLESHEET */

	<link rel="stylesheet" href="styles.css">

	/* BULMA */

 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
      
	/* FONTAWESOME */
      
	<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-	a11y="true"></script>


</head>

<body>
      
	/* JAVASCRIPT SCRIPTS /*
    
	<script src="script.js"></script>

</body>
</html>

Select2 with search icon in placeholder

Select2 with FontAwesome

Boilerplate & Imports

Save snippets that work with our extensions