Using Font Awesome icons in Mailchimp campaign - html

I have created an HTML template for a mailchimp campaign that includes font awesome icons in the footer. If I send the HTML email using Mandrill, its works fine. When I import the HTML into a Mailchimp template, the icons dont appear.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
.footer i {
color: #999;
margin: 0 2px;
}
.footer i:hover {
color: #333;
}
.footer p {
text-align: center;
margin-bottom: 15px;
}
.footer a i {
border: none;
outline: none;
}
</style>
Here are the icons in use:
<p>
<a href="http://facebook.com/"><i class="fa fa-facebook-square fa-2x"></i>
<a href="http://twitter.com/"><i class="fa fa-twitter fa-2x"></i>
<a href="http://pinterest.com/"><i class="fa fa-pinterest fa-2x"></i>
<a href="http://instagram.com/"><i class="fa fa-instagram fa-2x"></i>
</p>

You need to use inline CSS as it says :
Use inline CSS Because browser-based email applications, such as
Gmail, strip out <head> and <body> tags by default, always use
inline CSS over embedded CSS.
Read the link
Try converting your code here and then mail it

There's no way to do this. Unfortunately e-mail clients are way too limited. Most can't handle any CSS3, nor #font-face (that's what font-awesome uses for the icons). If you want Outlook support - you certainly want - you shouldn't use the icons as background images too.
The only safe way is to convert every icon to images. Fortunately, iconmoon can help. Choose the icons you need, select to download as SVG/PNG and use the PNG files.
Another warning: use tables for layout, like you were in 1998, no floats or fancy stuff like that.

If you are asking: "How can I use a HTML template, which includes Font Awesome icons, in a MailChimp campaign?" then I can't help.
But I can answer "How can I use Font Awesome icons in a MailChimp campaign?"
The only way that I found that works is to build your MailChimp campaign on their website, using their campaign editor/designer. Basically, I had to turn the icon into an image, and in-line and re-size it to fit my needs. Extra manual work, but this is what I needed. Hope this helps.

Related

Font Awesome 5: some unicode won't display in html select

I have a html select with 2 items, each one should show a FA icon, but only one of them works.
Both icons only have the "sold" version available FA5 free.
Changing the font family to "Font Awesome 5 Free", did not help and then none of icons displayed.
<html>
<head></head>
<body>
<style>
select {
font-family: 'FontAwesome';
}
</style>
<select style='font-weight: 900;'>
<option> Broke</option>
<option> Working</option>
</select>
<br/><br/> Code valid as this shows <i class='fas'></i><br/><br/> But displayed icons have the solid style as free and the other styles are pro only<br /> https://fontawesome.com/icons/graduation-cap?style=solid f19d<br /> https://fontawesome.com/icons/th-large?style=solid
f009<br />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-1/js/all.js" crossorigin="anonymous"></script>
</body>
</html>
Thanks in advance
You are using the JS+SVG method to load your icons so the one used inside the content <i class='fas'></i> will get transformed into an SVG. The unicde inside the select aren't considered by this and will rely on the font-family: 'FontAwesome' which is the old version and the first icon you are trying to show exist only in the V5 (unlike the second one).
To fix your issue, you need to load the CSS version and correct the font-family
select {
font-family: 'Font Awesome 5 Free';
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0-1/css/all.css">
<select style='font-weight: 900;'>
<option> Broke</option>
<option> Working</option>
</select>
<br/><br/> Code valid as this shows <i class='fas'></i><br/><br/> But displayed icons have the solid style as free and the other styles are pro only<br /> https://fontawesome.com/icons/graduation-cap?style=solid f19d<br /> https://fontawesome.com/icons/th-large?style=solid
f009
<br />

How to change font-size for text within an <a> tag in HTML

I'm setting up a website and inserting social media links in the footer. I am using Font Awesome's social media icons (see code to understand). To use the icons you must set the tag with a class of whichever icon you would like. I am trying to have the icon bigger than the text associated with it.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a style="font-size:25px;" href="https://www.facebook.com/username/" class="fa fa-facebook"> #username</a>
<a style="font-size:25px;" href="https://www.instagram.com/username/" class="fa fa-instagram"> #username</a>
This code results in the icon and the text associated being both 25px. I would like to change the font-size for the text only to 20px.
You are using the font awesome wrong. They always use the < i > tag for that so you won't have to separate it with css so this is how the html should look:
a {
font-size:20px;
}
a i {
font-size:25px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<a href="https://www.facebook.com/username/">
<i class="fa fa-facebook"></i> #username
</a>
<a href="https://www.instagram.com/username/">
<i class="fa fa-instagram"></i> #username
</a>
Also you don't have to apply the inline-block style to the icon, that is already done in the plugin CSS.
Use the span tag
<a>#<span style="font-size: 20px">username</span></a>.
In this way the font size for username is targeted by the span.
Target the pseudo-element
a.fa::before {
font-size:25px;
display: inline-block;
}
a {
font-size:20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
#username
#username
The icon appears in the generated content in ::before. Target that pseudo-element with a stylesheet.
.fa::before {
font-size: 25px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
#username
#username
Depending on your HTML version:
HTML 5 states that the element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".
HTML 4.01 specifies that elements may only contain inline elements. fas is a block element, so it may not appear inside an <a>.
You could use a <div> with display: inline inside of your tag, if you use HTML5
Or a span, or some inline property if your HMLT should be compatible < 5
a{
font-size: 200px;
}
.fas{
font-size: 20px;
display: inline;
}
<div class="fas">hi</div>Hello

How to keep Google from putting material-icons text in site links?

Many of my links have material icons in tags inside the link. Now, Google has indexed my page with site-links that include the text/ligature from that material-icons tag, so a link might say "shopping_cart Shop Now" for example.
Everything already displays correctly when browsing the site, but it's just in google's search results that the page titles look ridiculous.
<li>
<a href="/feed.php">
<i class="material-icons icon">shopping_cart</i>
<span>Shop Now</span>
</a>
</li>
I would not expect the text "shopping_cart" to appear when Google indexes these page titles for site-links. How can I tell Google to stop doing that?
You can't tell Google to stop indexing that. What you can do is remove what you don't want Google to index. For example, if you don't want it indexing the material icon text then remove the material-icons class and text from the HTML.
What you can do instead is add it via CSS with a pseudo class, here's a pen for example: https://codepen.io/MatthewRader/pen/VNZxdo
your HTML and CSS would look like this:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<li>
<a href="/feed.php">
<span>Shop Now</span>
</a>
</li>
li {
list-style:none;
}
a {
text-decoration: none;
color: PeachPuff;
padding: 10px;
background: SaddleBrown;
}
a::before {
font-family: 'Material Icons';
content: "shopping_cart";
-webkit-font-feature-settings: 'liga';
}

Use inline SVG instead of font-awesome webfont in pure CSS

I am using a bulma-based template for a static site generator and I'm looking to remove any dependencies on Javascript and any resources hosted by third parties, as well as generally minimizing things.
The template utilizes font awesome for some of the icons involved, but it's really only around 5-10 icons total, so I was planning to inline them as SVGs rather than load an entire web font. However, I'm not sure how to get as close as possible to a drop-in replacement for these few icons through pure CSS.
Here is a minimal working example of the HTML:
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<ul style="list-style: none">
<li>
<a href="https://example.com">
<span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
<span>Example</span>
</a>
</li>
<li style="font-size: 20px">
<a href="https://example.com">
<span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
<span class="link-text">Example</span>
</a>
</li>
<li style="font-size: 40px">
<a href="https://example.com">
<span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
<span class="link-text">Example</span>
</a>
</li>
</ul>
If I use this with the fontawesome CSS (see this JSfiddle) by prepending this:
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
I get an icon that scales with the font size, has the same color as the font size and is centered vertically with respect to the text. If, however, I use an inline SVG (see this JSFiddle), with this CSS:
.fa-globe::before {
content: '';
display: inline-block;
height: 1em;
width: 1em;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzY0LjIxNSAxOTJoMTMxLjQzYzUuNDM5IDIwLjQxOSA4LjM1NCA0MS44NjggOC4zNTQgNjRzLTIuOTE1IDQzLjU4MS04LjM1NCA2NGgtMTMxLjQzYzUuMTU0LTQzLjA0OSA0LjkzOS04Ni43NDYgMC0xMjh6TTE4NS4yMTQgMzUyYzEwLjY3OCA1My42OCAzMy4xNzMgMTEyLjUxNCA3MC4xMjUgMTUxLjk5Mi4yMjEuMDAxLjQ0LjAwOC42NjEuMDA4cy40NC0uMDA4LjY2MS0uMDA4YzM3LjAxMi0zOS41NDMgNTkuNDY3LTk4LjQxNCA3MC4xMjUtMTUxLjk5MkgxODUuMjE0em0xNzQuMTMtMTkyaDEyNS4zODVDNDUyLjgwMiA4NC4wMjQgMzg0LjEyOCAyNy4zMDUgMzAwLjk1IDEyLjA3NWMzMC4yMzggNDMuMTIgNDguODIxIDk2LjMzMiA1OC4zOTQgMTQ3LjkyNXptLTI3LjM1IDMySDE4MC4wMDZjLTUuMzM5IDQxLjkxNC01LjM0NSA4Ni4wMzcgMCAxMjhoMTUxLjk4OWM1LjMzOS00MS45MTUgNS4zNDUtODYuMDM3LS4wMDEtMTI4ek0xNTIuNjU2IDM1MkgyNy4yNzFjMzEuOTI2IDc1Ljk3NiAxMDAuNiAxMzIuNjk1IDE4My43NzggMTQ3LjkyNS0zMC4yNDYtNDMuMTM2LTQ4LjgyMy05Ni4zNS01OC4zOTMtMTQ3LjkyNXptMjA2LjY4OCAwYy05LjU3NSA1MS42MDUtMjguMTYzIDEwNC44MTQtNTguMzk0IDE0Ny45MjUgODMuMTc4LTE1LjIzIDE1MS44NTItNzEuOTQ5IDE4My43NzgtMTQ3LjkyNUgzNTkuMzQ0em0tMzIuNTU4LTE5MmMtMTAuNjc4LTUzLjY4LTMzLjE3NC0xMTIuNTE0LTcwLjEyNS0xNTEuOTkyLS4yMjEgMC0uNDQtLjAwOC0uNjYxLS4wMDhzLS40NC4wMDgtLjY2MS4wMDhDMjE4LjMyNyA0Ny41NTEgMTk1Ljg3MiAxMDYuNDIyIDE4NS4yMTQgMTYwaDE0MS41NzJ6TTE2LjM1NSAxOTJDMTAuOTE1IDIxMi40MTkgOCAyMzMuODY4IDggMjU2czIuOTE1IDQzLjU4MSA4LjM1NSA2NGgxMzEuNDNjLTQuOTM5LTQxLjI1NC01LjE1NC04NC45NTEgMC0xMjhIMTYuMzU1em0xMzYuMzAxLTMyYzkuNTc1LTUxLjYwMiAyOC4xNjEtMTA0LjgxIDU4LjM5NC0xNDcuOTI1QzEyNy44NzIgMjcuMzA1IDU5LjE5OCA4NC4wMjQgMjcuMjcxIDE2MGgxMjUuMzg1eiIvPjwvc3ZnPg==");
}
The icon is not centered vertically with respect to the text, and it is not the same color as the text. What is the best way to treat inline SVGs as replacements for font awesome glyphs without javascript? (I'm less concerned with the "icons are the wrong color" than the fact that they don't seem to be aligned well with the text, I just mention it because if there is an approach that solves both problems, I'd prefer that).
Perhaps this resource could be useful for you. IcoMoon has a decent selection of free icons, including the social networks, and if you click 'generate svg' you can then select 'get code' and copy/paste the html and css straight into your site.
To change icon color and layout you can simply change the css you just grabbed.
Something like:
`
.icon {
display: flex;
align-items: center;
color: #whatever-text-color;
}
`
Here is a JS-free example that you can play with. If you are using a sass variable for controlling font-size, you could also hook the image up to that to keep everything scaling together.
The only catch with using SVG over using font-awesome is a lack of svg support on old/ancient IE browsers. Everything else is a solid win - less http requests, less file size, less dependencies.
Hope this helps :)
EDIT
extra tip. For animations with inline svg, put a class or id onto the PATH tag and animate that. For rotations you might also need: transform-origin: center; since it defaults to rotating around the top-right.
If you have an svg with multiple paths, you can animate them individually and start getting really funky.
In your fiddle https://jsfiddle.net/ks392fzv/6/, if you set content to content to content: "\00a0\00a0" in the .fa-globe::before class, it will give the i content and that element can now align by the baseline.
.fa-globe::before {
content: '\00a0\00a0';
...
I forked your fiddle and made the small change here: https://jsfiddle.net/ndebellas/y4dLcqkx/.

How to make an arrow character as seen in the attached image?

I'm working to reproduce a design I found, the design shows a text arrow like so:
Any idea how to make that arrow? The obvious > looks wrong:
It looks like your designer used chevron-right from Font Awesome. You can install it by adding a stylesheet from the Font Awesome CDN like I've done below or through any of the other setup options. Then, you can reference the icon on the page by copying the icon code that the Font Awesome documentation supplies you with.
Here's a demo where I've tried to recreate your image:
:root {
background-color: #22272A;
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: #BCBDBD;
}
.fa-chevron-right {
margin-left: 6px;
}
HIKING <span class="fas fa-chevron-right"></span>
<!-- External Libraries -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
In production code, you may want to choose a different installation method for performance considerations that takes into account your page's needs - for example, choosing to import SVGs with JavaScript if you don't have a very large number of icons to display.
Try http://fontawesome.io
They have lots of icons - Search for 'fa-angle-right ' on this page: http://fontawesome.io/cheatsheet
Otherwise, you can use a png or an svg.
<!DOCTYPE html>
<html>
<style>
body {
font-size: 20px;
}
</style>
<body>
<p>I will display ❯</p>
<p>I will display ❯</p>
</body>
</html>