Welcome Guest, Not a member yet? Register   Sign In
safe_mailto with FontAwesome icon
#1

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.
Reply
#2

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.
Reply
#3

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.
Reply
#4

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

(10-16-2015, 09:02 AM)mwhitney Wrote: 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.

(10-16-2015, 09:52 AM)mwhitney Wrote: 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!
Reply




Theme © iAndrew 2016 - Forum software by © MyBB