68

I'm developing a Rails app and we need to send emails.

I have installed font-awesome icons through a rails gem (https://github.com/bokmann/font-awesome-rails) (i use .scss)

It works fine on my webpage views but not on emails. At least gmail doesn't display them.

It is normal ? Can I use awesome fonts on email views/layout? If not, where could I find png/svg versions of awesome fonts icons so that the icons I use on my web pages are the same as those I use on my emails (for consistency)?

user229044
  • 232,980
  • 40
  • 330
  • 338
Mathieu
  • 4,587
  • 11
  • 57
  • 112

5 Answers5

68

You can't use webfonts reliably in html emails. Some clients might respect and render them, but the majority don't.

idlefingers
  • 31,659
  • 5
  • 82
  • 68
  • 1
    I got it. then do you know where could i find png/svg versions of awesomefonts icons so that the icons i use on my web pages are the same as those i use on my emails (for consistency)? – Mathieu Jul 26 '13 at 12:10
  • 1
    Sorry, I don't know about awesomefonts at all. Since a lot of clients will block images, unless you want big parts of your email to be missing until the user clicks to show images, you'd probably be better off just having a different design for emails anyway. – idlefingers Jul 26 '13 at 12:13
  • 2
    @Mathieu what's a problem with creating png's for ones you need yourself? – Mike Szyndel Jul 26 '13 at 12:27
  • 3
    @Mathieu install the font locally, if you use Illustrator try to insert the icon in your artboard. You should find it in File >> Glyphs >> Select Fontawsome. Hope it helps. – Jorge Najera T Aug 01 '13 at 05:53
  • 8
    This answer should not be accepted, it's hardly an answer. – tim-phillips Apr 15 '16 at 21:12
  • @Rohmer, why should the answer not be accepted? It says, that webfonts will not be loading in almost any client. This is because it could be used to track, if the mail was opened. Therefore spammers would get information about successful sending emails. Therefore this answer is correct. You simply cannot use webfonts/images in a mail and be sure they will be shown to the user. – Darokthar Jan 23 '22 at 11:50
53

You can use this website to convert the icons into images, and then simply download the images and upload them to Imgur. From there you can use <img> tags to link to the Imgur images.

Edit:

A better solution would be to host the images on your own server with the same domain as your email's domain. This will increase the chance of images automatically being displayed on your emails, as they are normally hidden until the user decides to view them.

For example, if I used myname@mydomain.com to send emails, I'd host the images on mydomain.com

Daniel
  • 3,115
  • 5
  • 28
  • 39
  • After converting icons into images. You can use [this GitHub Repository](https://github.com/coolboi567/Imgur-PHP-Image-Uploader) using this site [CopyFoto.cf](https://copyfoto.cf) to obtain imgur direct image url. – c0degeas Oct 03 '18 at 13:04
  • Wonderful idea! Thank you :) – ZenekMetalGuru Dec 17 '18 at 19:47
  • 1
    That website is giving a 404. Need to update link or answer. Try this link: https://fa2png.app/ – RedSands Feb 07 '21 at 03:06
8

You can embed them as images in your email. You can use fa2png.io which converts the font awesome icons to png of required size as well as color.

Pang
  • 9,564
  • 146
  • 81
  • 122
Birlla
  • 1,700
  • 2
  • 15
  • 17
5

You can embed them as images in your email. In order to convert them to images you can download Font Awesome to PNG in the Mac App Store. It will export PNG versions of the font awesome icons in any size or color.

https://itunes.apple.com/us/app/font-awesome-to-png/id826676932?ls=1&mt=12

bvogelzang
  • 1,405
  • 14
  • 17
4

You can try to output the icons into a PNG, and include in your email HTML. If you are familiar with PHP, this open source project at GitHub can help you automatically convert them.

Makoto
  • 104,088
  • 27
  • 192
  • 230
exiang
  • 559
  • 2
  • 14
  • I used it, it works nicely from command line and generates various sizes and colors (and allows you to config), this is exactly what I need for my emails, just as the OP asked. – hakunin Oct 11 '13 at 10:27