Customize the asterix * character?

Hi ajtruckle,

We do have a tutorial with code to customize the character/content of the required indicator. Here’s our tutorial with all the details on this.

However, I tried this out with the Font Awesome code for the asterisk you shared and this didn’t work for me (in case you’re curious, here’s a screenshot of the code I tried).

However, this can still be accomplished with a couple alternate steps:

1) Add the code from that tutorial, but with no content between the span tags. Here’s the code you’d need:

/**
 * Modify the required field indicator
 *
 */
function wpf_dev_required_indicator( $text ) {
	return ' <span class="wpforms-required-label"></span>';
}
add_filter( 'wpforms_field_required_label', 'wpf_dev_required_indicator' );

If you’re not sure how to add custom code like this to your site, here’s a tutorial from WPBeginner with an easy option.

2) Add CSS to insert the Font Awesome icon between those span tags. Here’s the CSS you’d need for that asterisk:

span.wpforms-required-label:after {
    content: "\f069";
    font-family: "FontAwesome";
}

CSS will need to be added to a different place than the PHP from the first step. Here’s a tutorial from WPBeginner on how to add custom CSS to your site.

Here’s a screenshot of the end result when I tested this all out.

And if you’d like to make the asterisk a bit smaller and raised up higher (more like a typical asterisk), you could try using this CSS instead:

span.wpforms-required-label:after {
    content: "\f069";
    font-family: "FontAwesome";
    font-size: 10px;
    vertical-align: top;
}

You may need to play with the font-size value a bit depending on your site’s font, but hopefully this helps you get started.

Hope this helps! ??

Thanks! I have tried this and I think it is workign fine.

Only question I have is that when I added the snippet there was a default setting:

Run snippet everywhere

There was three other choices. I know the last choice would be not right. But did not know about the other two. So I left it on the first. Was that correct? The tutorial doesn’t say.

Thanks.

Hi ajtruckle,

I took a look at the Code Snippets settings, and in most cases you can use the “Only run on site front-end” option. This will prevent code like this, which only applies to embedded forms, from unnecessarily running in the WordPress admin area.

It won’t make any noticeable difference either way for a small snippet of code like this, but that would be the better option in this case ??

Thanks. ??