Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I use font-awesome icons on emails

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)?

like image 600
Mathieu Avatar asked Jul 26 '13 11:07

Mathieu


People also ask

Are Font Awesome icons copyright free?

Font Awesome is fully open source and is GPL friendly. You can use it for commercial projects, open source projects, or really just about whatever you want. Attribution is no longer required as of Font Awesome 3.0 but is much appreciated: "Font Awesome by Dave Gandy - http://fontawesome.io".

Can I use Font Awesome icons?

Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons. Also note that if you change the font-size or color of the icon's container, the icon changes. Same things goes for shadow, and anything else that gets inherited using CSS.

How do I add an icon to an email template?

Navigate to Settings, go to Email Templates, select the email you want to add the image to, and click Edit. You'll need to click the Source Icon < >. Don't fret if you haven't used HTML before, we'll help you do it like a pro. Click the Source Icon < > again, and you'll see how your image looks.

How do I put an email icon in HTML?

To insert an icon, add the name of the icon class to any inline HTML element. The <i> and <span> elements are widely used to add icons. All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)


3 Answers

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

like image 89
idlefingers Avatar answered Oct 09 '22 17:10

idlefingers


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 [email protected] to send emails, I'd host the images on mydomain.com

like image 45
dspacejs Avatar answered Oct 09 '22 16:10

dspacejs


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.

like image 7
Birlla Avatar answered Oct 09 '22 15:10

Birlla