https://www.almaprimary.org/_site/js/fontAwesomeSelector.js

1var holder = $(".fontAwesome"),
2field;
3
4holder.append('<p>Current Icon: <i id="faIcon" class="fa"></i></p>');
5holder.append('<select id="fontAwesomeDropdown" class="fontAwesome__dropdown" style="font-family: FontAwesome, sans-serif; text-transform: capitalize;"></select>');
6holder.append('<p>Please press update after selecting a new icon</p>');
7
8// Checks if it has "font awesome" in the description and shows the page
9$(".customFormDesc").each(function() {
10	if( $(this).text().toLowerCase() == "font awesome" ) {
11		$(".fontAwesome").show();
12		field = $(this).siblings().find("input").attr("id");
13	}
14});
15
16var customField = $("input#" + field),
17currentFieldValue = customField.val(),
18fontAwesomeSelect = $("#fontAwesomeDropdown"),
19fontIconJson;
20
21customField.closest(".customform__field--input").hide();
22
23$.getJSON("/_site/js/fa-icons.json", function(json) {
24	fontIconJson = json;
25	var sortedIconList = fontIconJson.icons.sort(function(a, b) {
26	    var textA = a.name.toUpperCase();
27	    var textB = b.name.toUpperCase();
28	    return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
29	});
30
31	$("#fontAwesomeDropdown").empty();
32	for( key in sortedIconList ) {
33		var item = sortedIconList[key];
34		fontAwesomeSelect.append('<option style="text-transform: capitalize;" value="fa-' + item.id + '"> &#x' + item.unicode + " " + item.name + '</option>');
35	}
36
37	// Set values to current
38	if( currentFieldValue != "" ) {
39		fontAwesomeSelect.find('option[value="' + currentFieldValue + '"]').attr("selected",true);
40		$("#faIcon").removeClass();
41		$("#faIcon").addClass('fa ' + currentFieldValue );
42	}
43});
44
45fontAwesomeSelect.on("change", function() {
46	$("#faIcon").removeClass();
47	$("#faIcon").addClass('fa ' + $(this).val() );
48	customField.val( $(this).val() );
49});
50
51