CSS Styling after PHP Template was Altered for WordPress Plug-in

Question

I'm working on a WordPress site where the previous developer exposed team members' e-mail addresses to spambots by using standard 'mailto' links. Here is how that was coded in the page template:

<?php if(get_field('email_id'))?><li><a href="mailto:<?php the_field('email_id');?>"><i class="fa fa-envelope"></i></a></li>

That yielded a clickable link via the 'envelope button', as seen here: https://monosnap.com/file/hGYBGsMsnzU1ENd8sKFYE1vtuiKzPS

So to solve the spambot problem, I installed a plug-in called PHPEnkoder , which required that line of the page template to be coded as follows:

<?php if(get_field('email_id'))?><li><?php echo enkode_mailto(get_field('email_id'),get_field('email_id'));?><i class="fa fa-envelope"></i></li>

Originally, the 'mailto' link was wrapped inside the a href tag, but since PHPEnkoder generates that a different way, it's changed the outputted HTML and the CSS rules aren't applying plus the entire 'button' functionality isn't working, as seen here: https://monosnap.com/file/YpuReWPyNUU1TWwWAYY8evwipBUZ7L

I'm not sure whether this needs to be fixed on the PHP side (by adjusting the above template page code), or by adding some CSS styling...

Either way, I'm not able to figure this out and could definitely use some help!

Answer 1

Without viewing the site entirely, and merely looking at your posted markup, it appears you are missing some markup. Specially the anchor markup : <a href="mailto:<?php ?>"> .

This:

<li><?php echo enkode_mailto(get_field('email_id'),get_field('email_id'));?><i class="fa fa-envelope"></i></li>

Should probably be...

<li><a href="mailto:<?php echo enkode_mailto(get_field('email_id'),get_field('email_id'));?>"><i class="fa fa-envelope"></i></li>

Note where the <a href="mailto: was added and the closing "> .