I have to split this into multiple posts since I can only have “2 links in a post” and it is counting some of the code as links…
I’m having trouble getting any icons to show up on Unbounce.
I referenced this old thread about using Fontawesome on Unbounce.
Using that, I copied _<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> into my CSS Stylesheet as it says.
I even went to the Fontawesome website (as linked on the above forum) and changed it to this: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
Then I go to "Custom HTML" on my style sheet and put in this icon: "<i class="fas fa-hand-holding-usd"></i>" (copied their code).
I get the "placeholder" but nothing shows up in Preview.
Please note I do not know anything about code; I’m simply copying and pasting based on instructions.
+4
Hi Caitlin, those steps and that code looks correct. Here’s a video of me pasting that same code and showing that it’s working. Maybe this will help troubleshoot it for you: https://cl.ly/2y3J2P1L3n0t
Regards,
My stylesheet for fontawesome is:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'>
I use it on this page
http://expertise.michaelpage.com.hk/2017-hong-kong-salary-employment-outlook-form/
Unfortunately it still won’t work for me. I do get a little ‘Caution’ icon beside my Stylesheet when I use the second link (that @Nicholas said was the one that worked for him), and so I tried using the second stylehseet posted by @crgmdws after - which did not give me a caution icon but still did not show it.
Perhaps it’s the way my page is set up or due to the template I’m using?
This is what I get with the first code I mentioned in my Stylesheet list:
+4
It should still work even with the little caution icon. Have you tested it and you’re saying it’s still not working even when you save and preview the page?
Ah, okay. Yes, I’ve tried multiple times to save and preview it but it doesn’t show up for some reason. I’m at a loss.
+4
Very strange. Could be an conflict with other scripts you’re using on the page, or other custom code. I know for a fact that the steps I outlined in my video work for sure on a clean Unbounce page. I’ve tested it multiple times.
All I’ve got on there is text, and text that links to other pages. That’s a shame.
+4
If you can share screenshots of the code placed on your page, maybe I’ll see something that looks out of place that you might need to adjust.
Unless you are using dozens of icons, you should probably be using SVG icons. Font Icons were created before SVGs were widely supported by browsers.
Unbounce supports SVGs. Simple upload them like images.
Someone converted FontAwesome icons to SVG format:
No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.