How can I use FontAwesome Icons with my Unbounce Landing pages?

  • 4 February 2014
  • 7 replies
  • 249 views
Johnny_Opao
Userlevel 3

FontAwesome Icons can be achieved using a particular setup:

Here’s how to do it:

You’ll want to headover to FontAwesome.io and grab the BootstrapCDN code found here:

http://fontawesome.io/get-started/

Here’s the actual line of code:

\_<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Drop that bit of code into your CSS Stylesheets box on the bottom left of the page builder. From there you can use the FontAwesome icon codes referenced in the link below by placing them in a CustomHTML object

http://fontawesome.io/examples/

That should do it! Here’s a test page for those who want to see it in action:

http://unbouncepages.com/fontawesome/

Be sure to checkout fontawesome’s website for the full list of icons and documentation:

http://fontawesome.io/icons/

*Keep in mind this integration only enables the use of FontAwesomes Icons and not existing Bootstrap components

7 replies

E

I followed the instcutions as mentioned about and pasted this code:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

I am getting an error, it says “Invalid” beside my CSS Stylesheet named “FontAwesome”

Am I missing something?

Quinn_Omori
Rank
Userlevel 3
Badge +1

Hi Edwin - the Font Awesome css should still work just like that, even if it is throwing that invalid error, but you can get it to validate by adding style=“text/css” to the code like this:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" type="text/css">

B

Hi,
I have a similar problem trying to refer to files of a clients fonts.
I get the error: Font from origin ‘http://www.somedomain.dk’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://mysubdomain.somedomain.dk’ is therefore not allowed access.
I have both tried to get the link to the css files on the www domain and to host the actual otf files on my own server.
In both cases I get the Access-Control-Allow-Origin error. How can I overcome this? Is there somewhere I can store the files with Unbounce?
Best regards
Lars

J

Hi Lars, 
I think we would need to dive into this a bit further to really answer your question. Have you reached out to our support team about this yet? support@unbounce.com

B

Thanks, Justin. I have send support the details in a request.
Lars

R

I used the instructions, and text boxes keep erasing my code. For example, I’m trying to use this:  as a bullet icon for a list. I can get it to work when I edit the source code, but as soon as I switch back to the visual editor or re-open the text box, the fontawesome code gets erased. I’m now adding custom HTML boxes, but it’s annoying because I have to move around and resize a whole bunch just to see where it sits - hard to align. Is there something else I can try?

jmo

Hi! So, I chose an icon on FontAwesome and was redirected to a page with mentioned line of code. I grab that code and add it to a new stylesheet. I’m not sure what I should do now. It shows an error on that stylesheet. Is there any magic so I can see the icon? (I’m trying to make a button with an icon). Thanks! 🙂

Reply


Terms & ConditionsCookie settings