safe_mailto with FontAwesome icon

Hi.  I'd like to use the safe_mailto function to obfuscate email addresses in my CodeIgniter application.  I'd also like to include a FontAwesome icon as part of the link that is displayed.  It works correctly when I use the mailto function, but doesn't work when using safe_mailto.

This is what I'm currently using with mailto:

Code:

<?php echo mailto('[email protected]','<i class="fa fa-envelope"></i>[email protected]'); ?>

How can I change this to be able to use safe_mailto?

Thanks.

Try using this CSS (after the font-awesome.css is included on your site):

Code:

a[href^="mailto"] {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a[href^="mailto"]:before {
    content: "\f0e0";
}

This is basically the .fa and .fa-envelope CSS from font-awesome applied to mailto links.

Bonfire

Practical CodeIgniter 3
CodeIgniter Testing Guide

Thanks for your reply. It does seem to add the envelope icon correctly, except now it looks to have changed the style of the link. I will see if I can fix it myself and if I get stuck, I will post here again.

You'll probably just need to move everything into the :before selector.

Bonfire

Practical CodeIgniter 3
CodeIgniter Testing Guide

Try using this CSS (after the font-awesome.css is included on your site):

Code:

a[href^="mailto"] {
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
a[href^="mailto"]:before {
   content: "\f0e0";
}

This is basically the .fa and .fa-envelope CSS from font-awesome applied to mailto links.

You'll probably just need to move everything into the :before selector.

Yup that did it.  I needed to also add a right margin to separate the icon from the email link, but moving them into the :before selector worked.  Thank you!