Tell us what you are trying to do?
Add an icon to the text that appears on the front end when a radio custom field is chosen on the back end.
For example trying to add <i class="fa fa-book"> to the text selected by a radio button custom field.
Is there any documentation that you are following?
Searching TS forum and KB
I know icons are added via CSS with :before but I am not sure how to programmatically add this CSS based on which radio button option is chosen in the back end. There's probably a simple solution but I am not seeing it.
This is a Types Radio Field, correct?
In this case, you can - when you insert the ShortCode to display it - choose what to display for selected options.
When inserting the ShortCode to display the field simply choose "Custom values for selected and not selected states".
Then insert the HTML you want in the custom values.
For example:
[types field='radio' option="wpcf-fields-radio-option-334daa327e96f77386f7a6229de3f52c-1"]<p>this</p>[/types][types field='radio' option="wpcf-fields-radio-option-fecba137feadc48d4ef3adaec364b06c-1"]<p>this</p>[/types][types field='radio' option="wpcf-fields-radio-option-f2c1ebf61eec5dbc7ad630c880525e56-1"]<p>this</p>[/types]
Of course, you can replace the <p> with anything you like, also an icon of Fontawesome or others.
Hmm, I dont think I explained my question very well. Please allow me to try again:
In the back end, I have a custom field meta box, let's say "Genre" for a Book post type, where user chooses one genre from a pre-populated list of genre options.
When they create a post for a non-fiction book, and choose 'non-fiction' in this genre meta box, on the front end I want to not only display the text 'Genre: Non-fiction' but also an icon to go with that dynamic text.
And so each genre should have its own icon. The genre chosen in the back end should determine the icon to be used rather than expecting the user to choose both a genre and an icon in a mix/match way.
So question is how to prepend an icon to the dynamically displayed field?
Yes, this is exactly how you can solve this, in my previous reply I explain that you will add a custom value to be displayed for the checked value, and in there you can add not only HTML (and hence icons) but also other text like the original value of the field (which of course needs to be added again, since you use a Custom Value now).
The user will not have to choose an icon, you will code that in the Content Template.
The user then only choose the genre, and it will display later with the icon.
You could of course also use an HTML condition to show the icon if the fields' value is a given genre but that is more resource expensive (because of the "if" check, each time you load the page, for each option and field/icon)
The Customs Value option can be chosen when you insert the ShortCode to display the Field of Genre.
It does not need to be crafted manually, but the Icon or Custom value per se must be added manually in the Options, for each possible option you have added in the field.
That is still dynamic because later, the ShortCode will display exactly what you chose to display, for the option picked by the user.
