+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: safe_mailto with FontAwesome icon (/showthread.php?tid=63295)
safe_mailto with FontAwesome icon - alotufo - 10-16-2015
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.
RE: safe_mailto with FontAwesome icon - mwhitney - 10-16-2015
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.
RE: safe_mailto with FontAwesome icon - alotufo - 10-16-2015
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.
RE: safe_mailto with FontAwesome icon - mwhitney - 10-16-2015
You'll probably just need to move everything into the :before selector.
RE: safe_mailto with FontAwesome icon - alotufo - 10-16-2015
(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!