Custom field – add text, icon, HTML… before/after the value

Content Views Pro helps you to show name, value of custom field easily.
To add custom icon, text, etc. before and after the field’s value, you can use one of 2 following solutions:

Add simple icon, text

Please add this code to Custom CSS field in Content Views >> Settings page:

.pt-cv-custom-fields[class*="FIELD_KEY"] {
    display: block !important;
}
.pt-cv-custom-fields[class*="FIELD_KEY"]:before {
    display: block;
    content: 'Your text here';
}
.pt-cv-custom-fields[class*="FIELD_KEY"]:after {
    display: block;
    content: 'Your text here';
}

(replace FIELD_KEY with the key of your custom field)

This is a sample to show a FontAwesome icon before the value:

.pt-cv-custom-fields[class*="FIELD_KEY"]:before {
    display: block;
    font-family: "Font Awesome 5 Brands";
    content: "\f082"; /* replace f082 with Unicode of the icon you want to use */
}

(to use FontAwesome, you need add this code to the header.php file of the theme:

<link rel="stylesheet" type="text/css" href="//use.fontawesome.com/releases/v5.7.2/css/all.css">

)

Add complex HTML

Please add this code to file functions.php in the directory of your active theme:

// Content Views Pro - Prepend prefix for custom field
add_filter( 'pt_cv_ctf_value', 'cvp_theme_ctf_value_prepend', 100, 3 );
function cvp_theme_ctf_value_prepend( $value, $key, $post ) {

	if ( $key === 'FIELD_KEY_1' ) {
		$value = 'YOUR CUSTOM HTML' . $value . 'YOUR CUSTOM HTML';
	}

	if ( $key === 'FIELD_KEY_2' ) {
		$value = 'YOUR CUSTOM HTML' . $value . 'YOUR CUSTOM HTML';
	}

	// and so on
	
	return $value;
}

For both cases, please replace FIELD_KEY_1, FIELD_KEY_2 with name of your custom fields.

Best regards,