Replace field labels with font awesome icons

Hi @trixxmanaty,

Sorry that you ran into issues here!

So, just to make sure I understand this, you’re entering what precise code into the label part of the field?

It’s probably not supported, but we DO add FA support in the plugin so if it’s not working, it might be incredibly easy to enable, if I understand how you’re trying to make it work….

Please let me know.

Hi @businessdirectoryplugin,

Thank you for your response. I am trying to add the following icons to the following:
<i class="fal fa-map-marker-alt"></i> to use in the Address field label
and <i class="fas fa-phone"></i> to use the Phone Number field.

Does it work in the field label? Please advise on how I can implement this.

Thanks.

Thanks for that @trixxmanaty.

I’ll need to ask my developer who is a bit backed up on support and is doing a release tomorrow, so I hope to hear back soon, but it may be a day or two before he frees up.

@businessdirectoryplugin , noted. Thanks

@businessdirectoryplugin,

Any update regarding this?

Thanks.

Hi @trixxmanaty,

Thanks for your patience on this. My developer has had a family emergency this week and is spending some time in the emergency room and hasn’t been available to work on this yet. It’s backed up all of our support and I’m very sorry about that.

I don’t know precisely when he’ll be available but I’m hoping soon.

Good news @trixxmanaty !

He replied with this:

Fee labels doesn’t support HTML, but he can use a BD filter to modify the label to use FA icons:

add_filter( 'wpbdp_display_field_label', 'maybe_use_fa_form_field_label', 10, 2 );

function maybe_use_fa_form_field_label( $label, $field ) {
    // Customer can find Field_ID under "Directory Admin -> Manage Form Fields".

    // For Phone:
    if( {Phone_Field_ID} === $field->get_id() ) {
        return '<i class="fas fa-phone"></i>';
    }

    // For Address:
    if( {Address_Field_ID} === $field->get_id() ) {
        return '<i class="fa fa-map-marker-alt"></i>';
    }

    return $label; //This line is very important to prevent breaking other labels.
}

This snippet can be included as a custom plugin or in theme’s functions.php file, though I recommend to include the custom plugin to prevent losing the functionality on theme change/update. Something like Pluginception to add it permanently.

Try that and let me know if you run into more issues.

Hi @businessdirectoryplugin,

That’s great. Thanks for your assistance. I have entered the snippet in my functions.php file but no changes were made to the field labels.

Thanks.

• This reply was modified 5 years, 3 months ago by trixxmanaty.

Hi @trixxmanaty,

Hmmmm…

For your field IDs, did you substitute a number for this part?

if( {Phone_Field_ID} === $field->get_id() ) {

and

if( {Address_Field_ID} === $field->get_id() ) {

{Address_Field_ID} and {Phone_field_id} need to be the numbers of your ACTUAL fields…

If you didn’t do that, you’d need to change the code there, or it won’t work

Hi @businessdirectoryplugin,

Yes, I did as below:

add_filter( 'wpbdp_display_field_label', 'maybe_use_fa_form_field_label', 10, 6 );

function maybe_use_fa_form_field_label( $label, $field ) {
    // Customer can find Field_ID under "Directory Admin -> Manage Form Fields".

    // For Phone:
    if( (6) === $field->get_id() ) {
        return '<i class="fas fa-phone"></i>';
    }

    // For Address:
    if( (10) === $field->get_id() ) {
        return '<i class="fa fa-map-marker-alt"></i>';
    }

    return $label; //This line is very important to prevent breaking other labels.
}

I also tried to replace the FA with an image link and did not work. Please advise on where I am going wrong.

Thanks.

Hi @businessdirectoryplugin,

Just to update that I have cleared the cache. It is now displaying the code <i class="fas fa-phone"></i> for the Phone Number field instead of an icon. No changes on the Address label.

Thanks.

Hi @trixxmanaty,

My developer was monitoring this thread and discovered that he was escaping HTML in the label field so that is why it’s not working.

We have a dev version that fixes this now. Contact us here with a link to this thread to get it: https://businessdirectoryplugin.com/contact/

Hi @businessdirectoryplugin ,

Noted. I will contact you now.

Thanks.

Hi @businessdirectoryplugin,

It finally worked now after installing the dev version.
Many thanks for your assistance.

You’re welcome!

Please let me know if you have any other questions or issues!