SOLVED

Font Awesome on Landing Page

Go to solution
Highlighted
Anonymous
Not applicable

Font Awesome on Landing Page

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

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 3 - Champion Alumni

Re: Font Awesome on Landing Page

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.

View solution in original post

3 REPLIES 3
Highlighted
Level 3 - Champion Alumni

Re: Font Awesome on Landing Page

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.

View solution in original post

Highlighted

Re: Font Awesome on Landing Page

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.

Highlighted
Anonymous
Not applicable

Re: Font Awesome on Landing Page

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!