Font awesome not displaying

support
1

Hi,
I’m hoping to use some font awesome icons as links to my social networks.
I use the the Hyde template and I put the following code in the sidebar.html template.

 {{ with .Site.Params.twitter }}<a href="{{.}}"><i class="fa fa-twitter-square"></i></a>&nbsp;&nbsp;{{end}}

I then define the twitter argument in the the config.toml file. Strangely the site rendered doesn’t show any icon. Do I need to change something in the CSS files?

Cheers.

2

Two things come to mind. First, have you added the font-awesome CSS to your header? Something like

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

Are you trying to output the link conditionally, only if .Site.Params.twitter is set? If so, you plobably want if instead of with.

3

Thanks for your answer.

Ok, the problem is with the non-existence CSS styling. I have download the whole font awesome folder and put it in the project folder. I put it in the static/ folder and use the below code to point to the CSS.

<link rel="stylesheet" href="{{ .Site.BaseURL }}font-awesome-4.7.0/css/font-awesome.min.css">

This seems to solve the problem when I preview the website locally, but it’s still not rendered properly when I deploy it on netlify.
It only shows blank box.
image

Cheers.

4

It’s probably not able to load the font. Open of the developer tools in your browser and look at the network requests to see which request(s) are failing, then you can figure out why.

Or just use the CDN version, that way people don’t have to download another copy of font-awesome when they visit your site.

5

oh, yeah. thanks for pointing out. It’s a much easier way. I must have glossed over that email box bar on the font awesome website thinking it was some kind of subscription.

6

You can also use the URL I posted above (https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css, which uses cdnjs). I usually prefer cdnjs because they host lots of libraries; if I want to use bootstrap too, for example, it’s also on cdnjs, so you don’t have an extra DNS lookup and TCP handshake for a second CDN. Not a big deal if everything is cached (likely), but every little bit helps.

Also, you don’t need to provide your e-mail address (which is a strange requirement for something like this, I don’t remember anyone else doing that).