Font Awesome on Landing Page | Community
Skip to main content
A
Anonymous
June 16, 2016
Solved

Font Awesome on Landing Page

  • June 16, 2016
  • 3 replies
  • 2728 views

Is it possible to integrate font awesome onto a  landing page. I referenced the font-awesome style sheet but the icons will not load on the page.

Thanks!

-Joey

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Jenna_Molby10

Yes, it's possible. Is the font-awesome stylesheet AND fonts uploaded to Marketo? If so, make sure you update the font paths in the first couple lines in the stylesheet to reference the Marketo-hosted font files.

  font-family: 'FontAwesome';

  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');

  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');

  font-weight: normal;

  font-style: normal;

If you're using the font-awesome CDN or if the font-awesome stylesheet is not hosted in Marketo, the font might not display in the editor or the preview mode. It will only display when you approve the landing page and view the live version.

3 replies

A
Anonymous
June 16, 2016

Thanks guys! I recreated the template using a guided LP instead of the free form version. I also hosted all the fonts on Marketo as Jenna suggested. Everything is working great now!

Casey_Grimes2
Casey_Grimes2
New Participant
June 16, 2016

Long story short: I've had some serious issues with using webfonts when they're hosted by a Marketo instance, so I've just switched to using externally hosted versions (for FontAwesome, specifically BootstrapCDN's version.​) This on its own doesn't tend to cause much issue with Guided Landing Pages, though the more complex you make a Guided Landing Page the more...squirrelly the landing page editor can become.

Jenna_Molby10
Jenna_Molby10Accepted solution
New Participant
June 16, 2016

Yes, it's possible. Is the font-awesome stylesheet AND fonts uploaded to Marketo? If so, make sure you update the font paths in the first couple lines in the stylesheet to reference the Marketo-hosted font files.

  font-family: 'FontAwesome';

  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');

  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');

  font-weight: normal;

  font-style: normal;

If you're using the font-awesome CDN or if the font-awesome stylesheet is not hosted in Marketo, the font might not display in the editor or the preview mode. It will only display when you approve the landing page and view the live version.

Terms & ConditionsAccessibility statement

Loading footer...