FontAwesome showing up as squares

[yshinzato]

Hi,

I was able to add font awesome to my old landing page templates but when I used the new theme, they are showing up as squares. Here is the link

I've tried it all different ways to upload the fontawesome kit:

@import url(//designers.hubspot.com/hs-fs/hub/327485/file-2054199286-css/font-awesome.css);
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

@font-face {
font-family:'FontAwesome';
src:url('https://static.hsappstatic.net/content_shared_assets/static-1.3779/fonts/fontawesome-webfont.eot?v=4...') format('embedded-opentype'),url('https://static.hsappstatic.net/content_shared_assets/static-1.3779/fonts/fontawesome-webfont.woff?v=...') format('woff'),url('https://static.hsappstatic.net/content_shared_assets/static-1.3779/fonts/fontawesome-webfont.ttf?v=4...') format('truetype'),url('https://static.hsappstatic.net/content_shared_assets/static-1.3779/fonts/fontawesome-webfont.svg?v=4...') format('svg');
font-weight:normal;
font-style:normal;
}

.header__menu .header__navigation .submenu.level-1 > .menu-item a:after{
font-family: 'FontAwesome';
content: "\f107";
font-size: 8px;
padding-left:3px;
}

I can change the content: "v"; and it appears in text so I'm guessing the font-awesome isn't loading or something it blocking it. I tried to apply the code to the domain header under HubSpot settings but nothing's working.  Anyone have a fix?

[yshinzato]

THANK YOU SO MUCH! I had the link in the wrong spot but it's working now! Thank you both for all your help!

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">

[webdew · Accepted solution]

Hi @yshinzato ,

Use this CDN file and add font-family like I have mention this code working properly:

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">

.class_name{
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f078";
}

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

[yshinzato]

Thanks so much! I tested this out and i removed the Kit from the account header settings and replaced all the <link> and @import to the link above and still seems to be appearing as squares (bolder squares, haha)

[miljkovicmisa]

Hello @yshinzato , seems like you're trying to load the fontawesome kit as well, I saw this line in the source code of the link you posted:

The problem with that is that your kit is not properly setup in the fontawesome site or this link has expired or the license has expired, difficult to know right now, but it is because of this that it probably doesn't work, you should check your console to see that the request to the kit is not authorized:

 

 

So to sup up, you should first get rid of this kit, and then use the code you posted to make some tests, if the issue remains, just post here with some more details so we can look into this, but this kit is most likely the issue. You're probably even trying to load differrent versions of fontawesome as kits are not part of the 4.x.x version as far as I know.

Note: Hubspot already supports and loads fontawesome, take a look in this post. There are also steps inside this post for loading other versions of fontawesome with kits, maybe you want to get rid of the code you posted here and go on with a kit instead, whatever the case you want only one implementations whether its kits or self hosted. Just make sure you don't get the error.

Also as a side note, check the other javascript issues seen here because other problems might be happening too.

If my answer was any helpful, please consider marking it as a solution.

[yshinzato]

Thanks, I will look further into the post you supplied but the way this theme was built I would have to start this header module from scratch and would prefer fixing this problem in case the fontawesome css affects other modules