diff --git a/phpBB/adm/style/acp_profile.html b/phpBB/adm/style/acp_profile.html
index 6a0b3ae11d..982bd5c4f5 100644
--- a/phpBB/adm/style/acp_profile.html
+++ b/phpBB/adm/style/acp_profile.html
@@ -92,7 +92,8 @@
 			<dd><input class="text medium" type="text" name="field_contact_desc" id="field_contact_desc" value="{FIELD_CONTACT_DESC}" /> <label for="field_contact_desc">{L_FIELD_CONTACT_DESC}</label></dd>
 			<dd><input class="text medium" type="text" name="field_contact_url" id="field_contact_url" value="{FIELD_CONTACT_URL}" /> <label for="field_contact_url">{L_FIELD_CONTACT_URL}</label></dd>
 			<dt><label for="field_icon">{{ lang('FIELD_ICON') ~ lang('COLON') }}</label><br /><span>{{ lang('FIELD_ICON_EXPLAIN') }}</span></dt>
-			<dd><input name="field_icon" id="field_icon" type="text" size="15" maxlength="255" value="{{ FIELD_ICON }}" placeholder="files-o" />{{ Icon('font', FIELD_ICON, '', true, {'style': 'color: #' ~ FIELD_ICON_COLOR}) }}</dd>
+			<dd><input name="field_icon" id="field_icon" type="text" size="15" maxlength="255" value="{{ FIELD_ICON }}" placeholder="files-o" />{{ Icon('font', FIELD_ICON, '', true, '', {'style': 'font-size: 16px; margin:0 6px; vertical-align: middle;' ~ (FIELD_ICON_COLOR ? (' color: #' ~ FIELD_ICON_COLOR ~ ';') : '')}) }}</dd>
+			<dd><input name="field_icon_color" type="text" id="contact_field_icon_bgcolor" value="{{ FIELD_ICON_COLOR }}" size="6" maxlength="6" placeholder="{{ lang('FIELD_ICON_COLOR') }}" /></dd>
 			<!-- EVENT acp_profile_contact_last -->
 		</dl>
 		{% EVENT acp_profile_contact_after %}
diff --git a/phpBB/adm/style/ajax.js b/phpBB/adm/style/ajax.js
index 38738d787e..a68301ea68 100644
--- a/phpBB/adm/style/ajax.js
+++ b/phpBB/adm/style/ajax.js
@@ -424,10 +424,15 @@ $(function() {
 * Automatically display custom profile fields FontAwesome icon
 */
 $(function() {
+	var $field_icon = $('#field_icon');
+	if (!$field_icon.next('i').length) {
+		$field_icon.after('<i style="font-size: 16px; margin:0 6px; vertical-align: middle;"></i>');
+	}
+
 	$('#field_icon').on('keyup blur', function() {
 		var input = $(this).val();
 		var $icon = $(this).next('i');
-		$icon.attr('class', 'icon fa-' + input + ' fa-fw');
+		$icon.attr('class', 'o-icon o-icon-font fa-fw fa-' + input + ' fas');
 	});
 
 });
diff --git a/phpBB/language/en/acp/profile.php b/phpBB/language/en/acp/profile.php
index f924a97e0d..bc22b833ce 100644
--- a/phpBB/language/en/acp/profile.php
+++ b/phpBB/language/en/acp/profile.php
@@ -94,6 +94,7 @@ $lang = array_merge($lang, array(
 	'FIELD_DESCRIPTION_EXPLAIN'	=> 'The explanation for this field presented to the user.',
 	'FIELD_DROPDOWN'			=> 'Dropdown box',
 	'FIELD_ICON'				=> 'Field icon',
+	'FIELD_ICON_COLOR'			=> 'Icon color',
 	'FIELD_ICON_EXPLAIN'		=> 'Enter the name of a Font Awesome icon to use with the field while displaying in the mini-profile on the topic screen. Leave this field blank to use phpBB default contact image icon.',
 	'FIELD_IDENT'				=> 'Field identification',
 	'FIELD_IDENT_ALREADY_EXIST'	=> 'The chosen field identification already exist. Please choose another name.',