{"id":878,"date":"2016-07-12T08:43:09","date_gmt":"2016-07-12T08:43:09","guid":{"rendered":"http:\/\/docs.contentviewspro.com\/?p=878"},"modified":"2023-12-27T11:09:55","modified_gmt":"2023-12-27T11:09:55","password":"","slug":"custom-field-prepend-prefix-icon-text","status":"publish","type":"docs","link":"https:\/\/contentviewspro.com\/documentation\/article\/custom-field-prepend-prefix-icon-text\/","title":{"rendered":"Add text, icon, HTML… before\/after the value of Custom field"},"content":{"rendered":"

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

Add simple icon, text<\/h2>\n

Please add this code to Custom CSS<\/strong> field in Content Views >> Settings page:<\/p>\n

.pt-cv-custom-fields[class*=\"FIELD_KEY\"] {\n    display: block !important;\n}\n.pt-cv-custom-fields[class*=\"FIELD_KEY\"]:before {\n    display: block;\n    content: 'Your text here';\n}\n.pt-cv-custom-fields[class*=\"FIELD_KEY\"]:after {\n    display: block;\n    content: 'Your text here';\n}\n<\/pre>\n
(replace FIELD_KEY with the key of your custom field)<\/p>\n
This is a sample to show a FontAwesome icon before the value:<\/p>\n
\n.pt-cv-custom-fields[class*=\"FIELD_KEY\"]:before {\n    display: block;\n    font-family: \"Font Awesome 5 Brands\";\n    content: \"\\f082\"; \/* replace f082 with Unicode of the icon you want to use *\/\n}\n<\/pre>\n
(to use FontAwesome, you need add this code to the header.php file of the theme:<\/p>\n
\n<link rel="stylesheet" type="text\/css" href="\/\/use.fontawesome.com\/releases\/v5.7.2\/css\/all.css">\n<\/pre>\n
)<\/p>\n
Add complex HTML<\/h2>\n
Please add this code to file functions.php<\/strong> in the directory of your active theme:<\/p>\n
\/\/ Content Views Pro - Prepend prefix for custom field\nadd_filter( 'pt_cv_ctf_value', 'cvp_theme_ctf_value_prepend', 100, 3 );\nfunction cvp_theme_ctf_value_prepend( $value, $key, $post ) {\n\n\tif ( $key === 'FIELD_KEY_1' ) {\n\t\t$value = 'YOUR CUSTOM HTML' . $value . 'YOUR CUSTOM HTML';\n\t}\n\n\tif ( $key === 'FIELD_KEY_2' ) {\n\t\t$value = 'YOUR CUSTOM HTML' . $value . 'YOUR CUSTOM HTML';\n\t}\n\n\t\/\/ and so on\n\t\n\treturn $value;\n}\n<\/pre>\n
For both cases, please replace FIELD_KEY_1, FIELD_KEY_2<\/strong> with name of your custom fields.<\/p>\n
Best regards,<\/p>\n","protected":false},"excerpt":{"rendered":"
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 …<\/p>\n
  Add text, icon, HTML… before\/after the value of Custom field<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"doc_category":[55,52],"doc_tag":[13,21],"class_list":["post-878","docs","type-docs","status-publish","hentry","doc_category-advanced-modification","doc_category-custom-field","doc_tag-custom-field","doc_tag-custom-code"],"year_month":"2026-09","word_count":258,"total_views":"3","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"admin1","author_nicename":"admin1","author_url":"https:\/\/contentviewspro.com\/documentation\/author\/admin1\/"},"doc_category_info":[{"term_name":"Advanced Modification","term_url":"https:\/\/contentviewspro.com\/documentation\/cats\/advanced-modification\/"},{"term_name":"Custom Field (core, ACF, Metabox, etc.)","term_url":"https:\/\/contentviewspro.com\/documentation\/cats\/custom-field\/"}],"doc_tag_info":[{"term_name":"custom field","term_url":"https:\/\/contentviewspro.com\/documentation\/tags\/custom-field\/"},{"term_name":"custom PHP code","term_url":"https:\/\/contentviewspro.com\/documentation\/tags\/custom-code\/"}],"_links":{"self":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/comments?post=878"}],"version-history":[{"count":3,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/878\/revisions"}],"predecessor-version":[{"id":5454,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/878\/revisions\/5454"}],"wp:attachment":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/media?parent=878"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_category?post=878"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}