Font Awesome on Landing Page

[Anonymous]

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

[Jenna_Molby10 · Accepted solution]

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.

[Casey_Grimes]

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.

[Anonymous]

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!